Question

问题：我希望Javascript计算用户的两个数字输入的总和，并在用户选中或点击该字段时立即显示第三个字段中的总和。错误：当第三个字段处于焦点时，Firefox，Chrome和Safari都显示为零;然而，为了公平对待Firefox，它在刷新后不情愿地显示了所需的结果;其他人不要。我怀疑我的代码中有一个我无法识别的错误，请帮忙。

＆＃13;

        window.onload = function() {
            var input1 = document.getElementById('bk').value;
            var input2 = document.getElementById('softw').value;
            input1 = Number(input1); // convert input to number
            input2 = Number(input2);
            input3 = input1 + input2; // Sum the inputs
            document.getElementById('total').onfocus = function() {
                document.getElementById('total').value = input3;
                return input3;
            }
        }

＆＃13;

<html>

<body>
    <div id='fm_div'>
        <form action="#" method="GET" id='form1'>
            <p>Qty of Books:
                <input type="text" name="bkqty" id='bk'>
            </p>
            <p>Qty of Software:
                <input type="text" name="software" id='softw'>
            </p>
            <p>Total:
                <input type='text' id='total'>
            </p>
            <p>
                <input type='submit' value='send' id='submit'>
            </p>
        </form>
    </div>
</body>

</html>

＆＃13;

Answer 1

您在窗口加载功能上设置 input1 和 input2 。但是文本框在加载时没有任何价值。更改你的window.onload函数如下

window.onload = function() {

  document.getElementById('total').onfocus = function() {
    var input1 = document.getElementById('bk').value;
    var input2 = document.getElementById('softw').value;
    input1 = Number(input1); // convert input to number
    input2 = Number(input2);
    input3 = input1 + input2; // Sum the inputs
    document.getElementById('total').value = input3;
    return input3;
  }
}

<div id='fm_div'>
  <form action="#" method="GET" id='form1'>
    <p>Qty of Books:
      <input type="text" name="bkqty" id='bk'>
    </p>
    <p>Qty of Software:
      <input type="text" name="software" id='softw'>
    </p>
    <p>Total:
      <input type='text' id='total'>
    </p>
    <p>
      <input type='submit' value='send' id='submit'>
    </p>
  </form>
</div>

使用javascript onFocus事件在另一个字段中显示表单输入元素的内容

1 个答案: