Question

如何在页面加载时从文本框中添加两个数字？它只在我尝试创建添加按钮时才有效。

＆＃13;

function sum() {
  var txtFirstNumberValue = document.getElementById('totalprice').value;
  var txtSecondNumberValue = document.getElementById('price1').value;
  var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
  if (!isNaN(result)) {
    document.getElementById('totalprices').value = result;
  }
}

＆＃13;

Answer 1

使用 window.onload

<script>
  function sum() {
            var txtFirstNumberValue = document.getElementById('totalprice').value;
            var txtSecondNumberValue = document.getElementById('price1').value;
            var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
            if (!isNaN(result)) {
                document.getElementById('totalprices').value = result;
            }
        }
  window.onload=sum;
</script>

Answer 2

您需要在文档加载window.onload侦听器https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload

后调用该函数

即。

function sum(){
     var txtFirstNumberValue = document.getElementById('totalprice').value;
            var txtSecondNumberValue = document.getElementById('price1').value;
            var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
            if (!isNaN(result)) {
                document.getElementById('totalprices').value = result;
            }
        }
window.onload = sum;

或者，您可以在文档中的HTML之后运行代码，而不是在函数中，然后它会立即解释

e.g。

<html>

<div>some stuff here</div>
... // bottom of document
<script>
var txtFirstNumberValue = document.getElementById('totalprice').value;
                var txtSecondNumberValue = document.getElementById('price1').value;
                var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
                if (!isNaN(result)) {
                    document.getElementById('totalprices').value = result;
                }
</script>
</html>

Answer 3

如果您更喜欢jQuery而非常规Javascript：

$(document).ready(function() {
    var txtFirstNumberValue = $('#totalprice').val();
    var txtSecondNumberValue = $('#price1').val();
    var result = (parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue));
    if (!isNaN(result)) {
        $('#totalprices').val(result);
    }
});

这也会比window.onload更早发布，从而带来更好的用户体验。

在onload事件上使用Javascript添加两个数字

3 个答案: