Question

我在stackoverflow上看到这个代码，它从输入字段计算两个数字，并在另一个文本字段中显示总和

的javascript

    <script type="text/javascript">
function calculate(){
    var x=parseInt(document.getElementById("first").value);
    var y=parseInt(document.getElementById("second").value);
    document.getElementById("answer").value=(x+y);
    }
    </script>

体

    First:<input id="first" name="first" type="text"><br>
    Second:<input id="second" name="second" type="text"><br>
    Answer:<input id="answer" name="answer" type="text"><br>
    <input onclick="calculate()" type="button" value="Addition">

当我尝试将答案输入字段更改为<span id="answer">时，答案未显示。无论如何，我可以将其显示为<span>或标题吗？

Answer 1

https://jsfiddle.net/ahmadasjad/t1dovxwg/3/

First:<input id="first" name="first" type="text"><br>
    Second:<input id="second" name="second" type="text"><br>
    Answer:<input id="answer" name="answer" type="text"><br>
    <input onclick="return calculate();" type="button" value="Addition">


calculate = function(){
    var x=parseInt(document.getElementById("first").value);
    var y=parseInt(document.getElementById("second").value);
    var ans=(x+y)
    document.getElementById("answer").value=ans;
    }

Answer 2

DOM返回的
getElementById(ID_OF_TE_SPAN_ELEMENT)对象没有value属性。

要设置span / div的文本，请使用element.innerText

试试这个：

function calculate() {
  var x = parseInt(document.getElementById("first").value);
  var y = parseInt(document.getElementById("second").value);
  document.getElementById("answer").innerText = (x + y);
}

First:
<input id="first" name="first" type="text">
<br>Second:
<input id="second" name="second" type="text">
<br>Answer:
<span id="answer"></span>
<input onclick="calculate()" type="button" value="Addition">

修改：根据mplungjan的建议，使用.innerHTML获得更好的向后兼容性（IE <6）。根据[docs]， innerText功能是非标准的，并且不在标准轨道，但从未遇到任何问题。也可以使用.textContent，但请考虑浏览器兼容性

Answer 3

function findingTotal()
    {
        var arr = document.getElementsByName('field');
        //alert(arr.length);
        var tot=0;
        for(var i=0;i<arr.length;i++)
        {
            if(parseInt(arr[i].value))
                tot += parseInt(arr[i].value);
        }
        document.getElementById('total_sum').value = tot;
    }

<h2>sum of dynamic input fields By NAME<h2>

Field-1 : <input onblur="findingTotal()" type="text" name="field" id="field_1"/><br>
Field-2 : <input onblur="findingTotal()" type="text" name="field" id="field_2"/><br>
<br>
Total : <input type="text" name="total_sum" id="total_sum"/>

如何显示使用javascript动态计算的两个数字的总和

3 个答案: