如何使用 JS 在同一输入文本字段中打印值

Question

我使用 HTML 创建了 5 个输入文本框，并在单击按钮时制作了一个按钮，值将打印结果输入文本框。 前 4 个字段是我的输入，最后一个文本字段是我的输出。 无法调试问题。 请找到代码并帮助找到问题。

 function JS(){ var h=document.getElementById('h').value; var w=document.getElementById('w').value; var g=document.getElementById('g').value; var t=document.getElementById('t').value; var total =(h+w+g+t); document.getElementById('result').innerHTML=total; }

 <h2> Calculator</h2> <input type="text" placeholder="value1" id="h"> <input type="text" placeholder="value2"id="w"> <input type="text" placeholder="value3" id="g"> <input type="text" placeholder="value4" id="t"> <input type="text" placeholder="result" id="result"> <!-- <p id="result"> </p> --> <button id="btn" onClick="JS()">Calculate</button>

Answer 1

function JS(){
            var h=document.getElementById('h').value;
            var w=document.getElementById('w').value;
      var g=document.getElementById('g').value;
      var t=document.getElementById('t').value;
      
      var total =(Number(h)+Number(w)+Number(g)+Number(t));
      
      document.getElementById('result').value =total; 
      

}

• .value而不是.innerHTML
• 此外，您应该将输入值转换为数字，而不是将总和视为字符串（例如，如果您键入 1、2、3、4 而不转换为数字，则为 1234，如果您转换为数字，则为 10

Answer 2

解决您的问题有两个关键：

1. 将您的输入强制转换为数字，我通过在赋值前添加一个+来实现这一点。 如果您不这样做，您的值可能会被视为字符串并被连接起来，而不是像数字一样被添加。
2. 设置输入元素的value ，而不是innerHTML 。 如果您更愿意使用<p>元素，您似乎在示例代码中注释掉了它（并且为了我的答案的完整性而恢复了它），请考虑使用innerText 。

请参阅此处的示例：

 function JS() { var h = +document.getElementById('h').value; var w = +document.getElementById('w').value; var g = +document.getElementById('g').value; var t = +document.getElementById('t').value; let p_result = document.getElementById('p_result'); var total = (h + w + g + t); document.getElementById('result').value = total; p_result.innerText = total; }

 <h2> Calculator</h2> <input type="text" placeholder="value1" id="h"> <input type="text" placeholder="value2" id="w"> <input type="text" placeholder="value3" id="g"> <input type="text" placeholder="value4" id="t"> <input type="text" placeholder="result" id="result"> <br> <p id="p_result" style="color:red;"></p> <br> <button id="btn" onClick="JS()">Calculate</button>