在javascript中添加总计，语法错误

时间：2015-04-14 18:10:53

标签： javascript html syntax-error

我正在建立一个基于龙珠Z的运动游戏，以获得乐趣。您可以在此页面输入所有数字并记录进度。

住在：http://surrealmayhem.com/dbzgame/record_progress.html

现在，到目前为止，我已经有99％的页面工作了。我想要完成的是从右边的所有东西中获取价值＆＃34; TOTALS＆＃34;列，并将其添加到页面底部的长进度栏中。

TOTALS列中的每个单独进度条都有效。但由于某种原因，我无法弄清楚底部的进度条不会起作用。我还是初学者，所以我怀疑它的语法。

我会发布我的整个代码，因为我必须在某处搞砸。

<script>
function balanceexp(){
    var arr = document.getElementsByName('balexp');
    var tot=0;
    for(var z=0;z<arr.length;z++){
        if(parseInt(arr[z].value))
            tot += parseInt(arr[z].value);
    }
    document.getElementById('balancetotal').value = tot;
}
</script>

<script>
function powerexp(){
    var arr = document.getElementsByName('powexp');
    var tot=0;
    for(var y=0;y<arr.length;y++){
        if(parseInt(arr[y].value))
            tot += parseInt(arr[y].value);
    }
    document.getElementById('powertotal').value = tot;
}
</script>
>

<script>
function staminaexp(){
    var arr = document.getElementsByName('staexp');
    var tot=0;
    for(var w=0;w<arr.length;w++){
        if(parseInt(arr[w].value))
            tot += parseInt(arr[w].value);
    }
    document.getElementById('staminatotal').value = tot;
}
</script>

<script>
function agilityexp(){
    var arr = document.getElementsByName('aglexp');
    var tot=0;
    for(var o=0;o<arr.length;o++){
        if(parseInt(arr[o].value))
            tot += parseInt(arr[o].value);
    }
    document.getElementById('agilitytotal').value = tot;
}
</script>

<script>
function controlexp(){
    var arr = document.getElementsByName('conexp');
    var tot=0;
    for(var s=0;s<arr.length;s++){
        if(parseInt(arr[s].value))
            tot += parseInt(arr[s].value);
    }
    document.getElementById('controltotal').value = tot;
}
</script>




<script type="text/javascript">

function findTotal() {
  var names = ['balancetotal', 'powertotal', 'staminatotal', 'agilitytotal', 'controltotal'];
  var total = 0;
  for (var i = 0; i < names.length; i++) {
    var value = document.getElementById(names[i]).value,
        x = parseInt(value, 10) || 0;
    total += x;
  }
  document.getElementById('exp_total').value = total;
}


</script>


</head>

<body>


<div class="wrapper">

<div class="column"></div>

<div class="start">


<center><font size="5">"My Progress" -  <a href="index.html">Home</a></font></center><br /><br />


This is a sacred place. This is where you will come at the beginning and end of every day to track and record your progress. In other words, this is exactly where your story is being written.   <br /><br />

<div class="left">



<img src="pics/goku_badge.png" title="Goku Badge: Completed 10,000 reps in one day">
<img src="pics/piccolodevilbadge.png" title="Piccolo Devil Badge: Defeated Piccolo in battle.">  
<img src="pics/100repsall_badge.png" title="100 Reps Badge: Completed 100 repititions of each exercise."> 
<img src="pics/100punches_badge.png" title="100 Punches Badge: Completed 100 punches.">  
<img src="pics/1star_dragonball.png" title="You found the One Star Dragon Ball!">  

</div>
<div class="right">

<table border="0px" cellpadding="5px">
<tr><td colspan="4" bgcolor="#CCCCCC">
<center><b>TOTALS:</b></center>
</td></tr><tr><td colspan="4"></td></tr>

<tr>
<td bgcolor="#BBBBDD">BALANCE:</td>
<td bgcolor="#BBBBDD"><progress min="0" max="200000" value="balancetotal" id="balancetotal" style="width:190px;"></progress>
</td></tr>
<tr>
<td><input onblur="balanceexp()" type="text" name="balexp" id="qty" style="width:30px;" onchange="findTotal()" > Leg Lifts</td>
<td><input onblur="balanceexp()" type="text" name="balexp" id="qty" style="width:30px;" onchange="findTotal()" > Crunches</td></tr>
<td><input onblur="balanceexp()" type="text" name="balexp" id="qty" style="width:30px;" onchange="findTotal()" > Rows</td>
<td><input onblur="balanceexp()" type="text" name="balexp" id="qty" style="width:30px;" onchange="findTotal()" > Lowerback extensions</td></tr>
</tr>


<tr>
<td bgcolor="#CCDDCC">POWER:</td>
<td bgcolor="#CCDDCC"><progress min="0" max="200000" value="powertotal" id="powertotal" style="width:190px;"></progress>
</td></tr>
<tr>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findTotal()" > Push ups</td>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findTotal()" > Sit ups</td></tr>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findTotal()" > Pull ups</td>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findTotal()" > Chin ups</td></tr>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findTotal()" > Dips</td>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findTotal()" > Squats</td></tr>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findTotal()" > Flies</td>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findTotal()" > Presses</td></tr>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findTotal()" > Lifts</td>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findTotal()" > Curls</td></tr>


<tr>
<td bgcolor="#DDDDAA">CONTROL:</td>
<td bgcolor="#DDDDAA"><progress min="0" max="200000" value=" controltotal" id="controltotal" style="width:190px;"></progress>
</td></tr>
<tr>
<td><input onblur="controlexp()" type="text" name="conexp" id="qty" style="width:30px;" onchange="findTotal()" > Punches</td>
<td><input onblur="controlexp()" type="text" name="conexp" id="qty" style="width:30px;" onchange="findTotal()" > Vacuums</td></tr>
<td><input onblur="controlexp()" type="text" name="conexp" id="qty" style="width:30px;" onchange="findTotal()" > Kicks</td>
<td><input onblur="controlexp()" type="text" name="conexp" id="qty" style="width:30px;" onchange="findTotal()" > Forearms work</td></tr>


<tr>
<td bgcolor="#CCA9A9">STAMINA:</td>
<td bgcolor="#CCA9A9"><progress min="0" max="200000" value=" staminatotal" id="staminatotal" style="width:190px;"></progress>
</td></tr>
<tr>
<td><input onblur="staminaexp()" type="text" name="staexp" id="qty" style="width:30px;;" onchange="findTotal()" > Planks</td>
<td><input onblur="staminaexp()" type="text" name="staexp" id="qty" style="width:30px;;" onchange="findTotal()" > Burpees</td></tr>
<td><input onblur="staminaexp()" type="text" name="staexp" id="qty" style="width:30px;;" onchange="findTotal()" > Hangs</td>
<td><input onblur="staminaexp()" type="text" name="staexp" id="qty" style="width:30px;;" onchange="findTotal()" > Wall sits</td></tr>


<tr>
<td bgcolor="#AACCDD">AGILITY:</td>
<td bgcolor="#AACCDD"><progress min="0" max="200000" value="agilitytotal" id="agilitytotal" style="width:190px;"></progress>
</td></tr>
<tr>
<td><input onblur="agilityexp()" type="text" name="aglexp" id="qty" style="width:30px;" onchange="findTotal()" > Walk / Run</td>
<td><input onblur="agilityexp()" type="text" name="aglexp" id="qty" style="width:30px;" onchange="findTotal()" > Jumping Jacks</td></tr>
<td><input onblur="agilityexp()" type="text" name="aglexp" id="qty" style="width:30px;" onchange="findTotal()" > Lunges</td>
<td><input onblur="agilityexp()" type="text" name="aglexp" id="qty" style="width:30px;" onchange="findTotal()" > Box Jumps</td></tr>

</table>

<br />
<input type="button" value="Print" name="printbutton" onclick="window.print();">


</div> 

<center>
Total experience: <br /> <!-- <input type="text" name="total" id="total"/> / 1,000,000 pts -->
<progress min="0" max="1000000" value="exp_total" id="exp_total" style="width:800px;"></progress>
</center>


</div>
</center>

</div>




<div class="column"></div>

我还有一个我编写的前一个脚本，它接受数字和总计实际工作的脚本，我试图将其改编为进度条，但这也没有用。我发布在这里，我认为这可能是一个更简单的解决方案。我还没有真正理解循环，我更喜欢这个脚本，但我不知道如何使它适应进度条。我不知道它是否有用但我认为我发布了两个。 

<script>
function findTotal(){
var bal_t = parseInt(document.getElementById("balancetotal").value);
var pow_t = parseInt(document.getElementById("poweretotal").value);
var con_t = parseInt(document.getElementById("controltotal").value);
var agl_t = parseInt(document.getElementById("agilitytotal").value);
var sta_t = parseInt(document.getElementById("staminatotal").value);

var total_exp = document.getElementById("total");
total_exp.value = bal_t + pow_t + con_t + agl_t + sta_t;

</script>

2 个答案:

答案 0 :(得分：2)

一个问题是allexp.length在此行中评估为undefined：

for (var i = 0; i < allexp.length; i++) {

您假设length是allexp的属性，就像它是一个数组一样。但是，您将allexp定义为添加或连接：

var allexp = (balancetotal + powertotal + staminatotal + agilitytotal + controltotal);

要制作字符串数组，请改为：

var names = ['balancetotal', 'powertotal', 'staminatotal', 'agilitytotal', 'controltotal'];

另一个问题是你将字符串视为具有value属性。每个字符串实际上是HTML元素的ID。因此，您应该使用getElementById查找元素，然后获取其值。

for (var i = 0; i < names.length; i++) {
  var value = document.getElementById(names[i]).value,  // Get value from element.
      x = parseInt(value, 10) || 0;  // Parse in base 10. Default to 0.
  tot += x;
}

最后一个问题是你没有在任何地方调用findTotal()。你什么时候想要它运行？例如，如果您希望在更新余额总额后运行它，则应插入对findTotal()的调用作为balanceexp()函数定义的最后一行。

总结一下，用以下代码替换当前的findTotal()函数：

function findTotal() {
  var names = ['balancetotal', 'powertotal', 'staminatotal', 'agilitytotal', 'controltotal'];
  var total = 0;
  for (var i = 0; i < names.length; i++) {
    var value = document.getElementById(names[i]).value,
        x = parseInt(value, 10) || 0;
    total += x;
  }
  document.getElementById('total').value = total;
}

然后确保在希望它运行时致电findTotal()。

下面是一个现场演示，其中包含了我所描述的变化。要试用它，请单击“运行代码段”按钮，然后单击显示在框内的“完整页面”按钮。

function findTotal() {
  var names = ['balancetotal', 'powertotal', 'staminatotal', 'agilitytotal', 'controltotal'];
  var total = 0;
  for (var i = 0; i < names.length; i++) {
    var value = document.getElementById(names[i]).value,
        x = parseInt(value, 10) || 0;
    total += x;
  }
  document.getElementById('total').value = total;
}

function balanceexp(){
    var arr = document.getElementsByName('balexp');
    var tot=0;
    for(var z=0;z<arr.length;z++){
        if(parseInt(arr[z].value))
            tot += parseInt(arr[z].value);
    }
    document.getElementById('balancetotal').value = tot;
    findTotal();
}

function powerexp(){
    var arr = document.getElementsByName('powexp');
    var tot=0;
    for(var y=0;y<arr.length;y++){
        if(parseInt(arr[y].value))
            tot += parseInt(arr[y].value);
    }
    document.getElementById('powertotal').value = tot;
    findTotal();
}

function staminaexp(){
    var arr = document.getElementsByName('staexp');
    var tot=0;
    for(var w=0;w<arr.length;w++){
        if(parseInt(arr[w].value))
            tot += parseInt(arr[w].value);
    }
    document.getElementById('staminatotal').value = tot;
    findTotal();
}

function agilityexp(){
    var arr = document.getElementsByName('aglexp');
    var tot=0;
    for(var o=0;o<arr.length;o++){
        if(parseInt(arr[o].value))
            tot += parseInt(arr[o].value);
    }
    document.getElementById('agilitytotal').value = tot;
    findTotal();
}

function controlexp(){
    var arr = document.getElementsByName('conexp');
    var tot=0;
    for(var s=0;s<arr.length;s++){
        if(parseInt(arr[s].value))
            tot += parseInt(arr[s].value);
    }
    document.getElementById('controltotal').value = tot;
    findTotal();
}
body{
background-color: orange;
margin: 0px;}

.wrapper{
height: auto;
width: 1260px;
margin: auto;
background-color: transparent;}

.start{
height: 800px;
width: 800px;
background-color: white;
margin: 35px 20px 10px 20px;
padding: 25px;
border: solid 10px #000000;
clear: none;
float: left;}

.left{
height: 610px;
width: 348px;
background-color: transparent;
clear: none;
float: left;
margin-right: 20px;
border: solid 1px #cccccc;
padding: 20px;
overflow-y: scroll;
overflow-x: hidden;}


.right{
height: 610px;
width: 348px;
background-color: transparent;
clear: none;
float: left;
margin-bottom: 8px;
border: solid 1px #cccccc;
padding: 20px;
overflow-y: scroll;
overflow-x: hidden;}

.column{
height: 1000px;
width: 165px;
background-image: url(pics/column.png);
background-color: transparent;
clear: none;
float: left;
overflow: hidden;}
<div class="wrapper">

<div class="column"></div>

<div class="start">

    
<center><font size="5">"My Progress" -  <a href="index.html">Home</a></font></center><br /><br />


This is a sacred place. This is where you will come at the beginning and end of every day to track and record your progress. In other words, this is exactly where your story is being written.   <br /><br />

<div class="left">



<img src="pics/goku_badge.png" title="Goku Badge: Completed 10,000 reps in one day">
<img src="pics/piccolodevilbadge.png" title="Piccolo Devil Badge: Defeated Piccolo in battle.">  
<img src="pics/100repsall_badge.png" title="100 Reps Badge: Completed 100 repititions of each exercise."> 
<img src="pics/100punches_badge.png" title="100 Punches Badge: Completed 100 punches.">  
<img src="pics/1star_dragonball.png" title="You found the One Star Dragon Ball!">  

</div>
<div class="right">

<table border="0px" cellpadding="5px">
<tr><td colspan="4" bgcolor="#CCCCCC">
<center><b>TOTALS:</b></center>
</td></tr><tr><td colspan="4"></td></tr>

<tr>
<td bgcolor="#BBBBDD">BALANCE:</td>
<td bgcolor="#BBBBDD"><progress min="0" max="200000" value="balancetotal" id="balancetotal" style="width:190px;"></progress>
</td></tr>
<tr>
<td><input onblur="balanceexp()" type="text" name="balexp" id="qty" style="width:30px;"> Leg Lifts</td>
<td><input onblur="balanceexp()" type="text" name="balexp" id="qty" style="width:30px;"> Crunches</td></tr>
<td><input onblur="balanceexp()" type="text" name="balexp" id="qty" style="width:30px;"> Rows</td>
<td><input onblur="balanceexp()" type="text" name="balexp" id="qty" style="width:30px;"> Lowerback extensions</td></tr>
</tr>


<tr>
<td bgcolor="#CCDDCC">POWER:</td>
<td bgcolor="#CCDDCC"><progress min="0" max="200000" value="powertotal" id="powertotal" style="width:190px;"></progress>
</td></tr>
<tr>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> Push ups</td>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> Sit ups</td></tr>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> Pull ups</td>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> Chin ups</td></tr>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> Dips</td>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> Squats</td></tr>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> Flies</td>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> Presses</td></tr>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> Lifts</td>
<td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> Curls</td></tr>


<tr>
<td bgcolor="#DDDDAA">CONTROL:</td>
<td bgcolor="#DDDDAA"><progress min="0" max="200000" value=" controltotal" id="controltotal" style="width:190px;"></progress>
</td></tr>
<tr>
<td><input onblur="controlexp()" type="text" name="conexp" id="qty" style="width:30px;"> Punches</td>
<td><input onblur="controlexp()" type="text" name="conexp" id="qty" style="width:30px;"> Vacuums</td></tr>
<td><input onblur="controlexp()" type="text" name="conexp" id="qty" style="width:30px;"> Kicks</td>
<td><input onblur="controlexp()" type="text" name="conexp" id="qty" style="width:30px;"> Forearm squeeze</td></tr>


<tr>
<td bgcolor="#CCA9A9">STAMINA:</td>
<td bgcolor="#CCA9A9"><progress min="0" max="200000" value=" staminatotal" id="staminatotal" style="width:190px;"></progress>
</td></tr>
<tr>
<td><input onblur="staminaexp()" type="text" name="staexp" id="qty" style="width:30px;;"> Planks</td>
<td><input onblur="staminaexp()" type="text" name="staexp" id="qty" style="width:30px;;"> Burpees</td></tr>
<td><input onblur="staminaexp()" type="text" name="staexp" id="qty" style="width:30px;;"> Hangs</td>
<td><input onblur="staminaexp()" type="text" name="staexp" id="qty" style="width:30px;;"> Wall sits</td></tr>


<tr>
<td bgcolor="#AACCDD">AGILITY:</td>
<td bgcolor="#AACCDD"><progress min="0" max="200000" value="agilitytotal" id="agilitytotal" style="width:190px;"></progress>
</td></tr>
<tr>
<td><input onblur="agilityexp()" type="text" name="aglexp" id="qty" style="width:30px;"> Walk / Run</td>
<td><input onblur="agilityexp()" type="text" name="aglexp" id="qty" style="width:30px;"> Jumping Jacks</td></tr>
<td><input onblur="agilityexp()" type="text" name="aglexp" id="qty" style="width:30px;"> Lunges</td>
<td><input onblur="agilityexp()" type="text" name="aglexp" id="qty" style="width:30px;"> Box Jumps</td></tr>

</table>

<br />
<input type="button" value="Print" name="printbutton" onclick="window.print();">


</div> 

<center>
Total experience: <br /> <!-- <input type="text" name="total" id="total"/> / 1,000,000 pts -->
<progress min="0" max="1000000" value="total" id="total" style="width:800px;"></progress>
</center>
    

</div>
</center>

</div>




<div class="column"></div>

答案 1 :(得分：0)

您尚未定义余额总额。

var balancetotal = document.getElementById('balancetotal').value || 0;
var allexp = (balancetotal + powertotal + staminatotal + agilitytotal + controltotal);

您需要为所有字段执行此操作。

此外，allExp是一个数字，而不是数组，因此您不需要for循环。您可以将其直接分配给总输入值。

在尝试获取值之前，您还需要等到DOM加载。

document.addEventListener('DOMContentLoaded', function() { ... });

有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded。

相关问题
最新问题