如何顯示使用javascript動態計算的兩個數字的和

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

getElementById(ID_OF_TE_SPAN_ELEMENT)返回的DOM對象沒有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"/>