Question

我正在尝试将我在Excel中制作的付费和储蓄计算器翻译成我可以在我的网站上托管并随处访问的网页。

我想要的是让值自动更新，而无需按下大量按钮。

我做了一些研究并整理了这段代码，但它没有用......

window.setInterval(function () {
  var week1 = document.getElementsByName("week1").value;
  var week2 = document.getElementsByName("week2").value;
  var week3 = document.getElementsByName("week3").value;
  var week4 = document.getElementsByName("week4").value;
  var week5 = document.getElementsByName("week5").value;

  var weekTotal = week1 + week2 + week3 + week4 + week5;

  document.getElementById("totalHours").innerHTML = weekTotal;
}, 1000);

有什么想法吗？

Answer 1

使用元素ID，而不是名称 - 然后您可以使用document.getElementById()
缓存这些元素变量，这样您就不必每次都调用document.getElementById()
将.value转换为parseInt(s, 10)的数字 - 虽然您还没有说明它如何失败，但会导致您出现问题，因为{{1}通常是一个字符串，并且在字符串上使用.value会进行连接，而不是添加。
不要在计时器循环中执行 - 它会阻止实时更新。相反，使用+（和/或onchange）事件处理程序，只要更新任何值，就会立即调用它。使用oninput，每次用户从一个输入移动到另一个输入时，将计算总和，onchange它将在每次按键（或复制/粘贴等）时重新计算。
< / LI>
请参阅http://jsfiddle.net/alnitak/7Gzs6/
```
oninput
```

Answer 2

document.getElementsByName返回一个数组

所以你可能想要检索名为'week1'的第一个元素[0]，依此类推。

var week1 = document.getElementsByName("week1")[0].value;

Answer 3

作为您选择的答案的替代方案，请考虑使用可用的集合并使用属性访问而不是函数调用。 e.g。

<script>

// Test that v is an integer
function isInt(v) {
  return /^\d+$/.test(v + '');
}

// Update the total if entered value is an integer
function updateTotal(e) {
  var e = e || window.event;
  var el = e.target || e.srcElement;
  var value = el.value;

  // If value is an integer, use it
  if (isInt(value)) {
    el.form.total.value = +el.form.total.value + +value;

  // Otherwise, do nothing (or show an error message asking
  // the user to input a valid value)
  } else {
    e.preventDefault();
  }
  return false;
}

// Add listeners to elements that need them
window.onload = function() {
  var form = document.forms['f0'];
  var els = form.elements;
  var re = /^week/;
  var total = 0;

  for (var i=0, iLen=els.length; i<iLen; i++) {
    if (re.test(els[i].name)) {
      els[i].onchange = updateTotal;
    }
  }
}
</script>

<form id="f0" action="">
  week1<input name="week1" value="0"><br>
  week2<input name="week2" value="0"><br>
  week3<input name="week3" value="0"><br>
  week4<input name="week4" value="0"><br>
  week5<input name="week5" value="0"><br>
  total<input name="total" value="0" readonly>
  <input type="reset"><input type="submit">
</form>

isInt函数有点简单，它应修剪前导和尾随空格等，但足以表明您必须在操作中使用它之前测试输入。这也是内联侦听器可能是更好解决方案的一个很好的例子。

每秒更新Javascript中的文本框值

3 个答案: