1

Excelで作成した給与と貯蓄の計算機を、自分のWebサイトでホストしてどこからでもアクセスできるWebページに変換しようとしています。

私が欲しいのは、ボタンをたくさん押すことなく、値を自動的に更新することです。

私は少し調査を行い、このコードをまとめましたが、機能していません...

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（および/または）イベントハンドラーを使用してください。合計は、ユーザーが1つの入力から別の入力に移動するたびにoninput計算され、キーを押すたびに再計算されます（またはコピー/貼り付けなど）。onchangeoninput

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

document.getElementsByName配列を返します

[0]したがって、 「week1」という名前の最初の要素を取得する必要があります。

var week1 = document.getElementsByName("week1")[0].value;
于 2012-12-20T22:17:33.920 に答える
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 に答える