1

我正在尝试将我在 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);

有任何想法吗？

4

3 回答 3

2

  1. 使用元素 ID，而不是名称 - 然后你可以使用document.getElementById()

  2. 缓存这些元素变量，这样您就不必document.getElementById()每次都调用

  3. 用 -转换.value成一个数字parseInt(s, 10)虽然你没有说它是如何失败的，但这会给你带来问题，因为.value通常是一个字符串，并且+在字符串上使用会进行连接，而不是加法。

  4. 不要在计时器循环中执行此操作 - 它会阻止实时更新。相反，使用onchange（和/或oninput）事件处理程序，只要更新任何值，就会立即调用该事件处理程序。onchange每次用户从一个输入移动到另一个输入时都会计算总和，每次oninput按键（或复制/粘贴等）时都会重新计算。

见http://jsfiddle.net/alnitak/7Gzs6/

var form = document.getElementById('myform');
var inputs = form.getElementsByTagName('input');
var totalView = document.getElementById('total');

function add(ev) {
    var total = 0;
    for (var i = 0, n = inputs.length; i < n; ++i) {
        var v = parseInt(inputs[i].value, 10);
        if (!isNaN(v)) {
            total += v;
        }
    }
    totalView.innerHTML = total;
}

form.addEventListener('change', add, false);​
于 2012-12-20T22:21:23.687 回答
0

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

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

于 2012-12-20T23:47:59.460 回答
0

document.getElementsByName返回一个数组

因此，您可能想要检索[0]名称为“week1”的第一个元素，依此类推。

var week1 = document.getElementsByName("week1")[0].value;
于 2012-12-20T22:17:33.920 回答