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

Question

为了好玩，我正在构建一个基于龙珠 Z 的健身游戏。此页面是您输入所有数字并记录进度的地方。

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

现在，到目前为止，我已经完成了该页面 99% 的工作。我想要完成的是从右侧 "TOTALS" 列中的所有内容中获取值，并将其添加到页面底部的长进度条中。

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

我会 post 我的整个代码，因为我一定是在某个地方搞砸了。

<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>

我也有一个我以前写的脚本，它接受数字并对它们进行总计，这确实有效，我试图将其调整为进度条，但也没有用。生病 post 它在这里，我认为这可能是一个更简单的解决方案。我还不太了解循环，我更喜欢这个脚本，但我不知道如何使它适应进度条。我不知道它是否有任何用处，但我认为 Id post 两者都有。

<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>

Answer 1

一个问题是 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() 运行。

下面是包含我所描述的更改的现场演示。要试用它，请单击 "Run code snippet" 按钮，然后单击显示在框内的 "Full page" 按钮。

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>

Answer 2

您还没有定义总余额。

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。

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

Adding totals in javascript, syntax error

html

javascript

syntax-error