How to print the values in the same input text field using JS

Question

I have created 5 input text boxes using HTML and made a button while clicking the button the values will print the result input text box. The first 4 fields are my inputs and the last text field is my output. unable to debug the issue. kindly find the code and help to find the issue.

 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 instead of .innerHTML
• also, you should convert inputs values to number cause instead of making the sum will be as consider them string( for example if you type 1, 2, 3, 4 without converting to number will be 1234 if you convert to number will be 10

Answer 2

There are two keys to resolving your issue:

1. Coerce your inputs to numbers, which I'm doing by adding a + in front of the value assignments. If you don't do this, your values may be treated like strings and concatenated rather than added like numbers.
2. Set the value of the input element, not the innerHTML . If you'd rather use a <p> element, which it appears you commented out in your sample code (and which I restored for completeness of my answer), consider using innerText .

See example here:

 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>