Print a Javascript variable in Input html

Question

  <script>
    function Sumar() {
        var n7 = document.getElementById('txtN7').value; /*Fator tempo*/
        var n8 = n7.replace(',','.');   
        var cem = (n8)/4; /*Calculo de fator*/
        var n1 = document.getElementById('txtN1').value; /*100%*/
        var n2 = document.getElementById('txtN2').value; /*101%*/

        var suma = ((parseInt(n1) + parseInt(n2))*cem); /*Resultado somenta dos valores de 100 e 101*/

        var n3 = document.getElementById('txtN3').value; /*95-99%*/
        var n4 = document.getElementById('txtN4').value; /*85%-94%*/
        var n5 = document.getElementById('txtN5').value; /*75%-84*/
        var n6 = document.getElementById('txtN6').value; /*50%-74%*/
        var n9 = document.getElementById('txtN9').value; /*No Match*/

        var suma1 = (((parseInt(n3) + parseInt(n4)+ parseInt(n5)+parseInt(n6)+parseInt(n9))*n8)+suma);
        document.write(suma1);
    /* alert("Número estimado em horas: "+suma1) */
       }
</script>

Good afternoon guys!!! I need to create an Html5 "Input Text" to print the summary variable of javascript. I used Document.write more when clicking the button it makes a refresh type and shows the value on a blank page. Thanks in advance!!!

<input type="button" onclick="Sumar();" value="Calcular Horas Tradução">

Answer 1

Utilize document.getElementById('id-do-campo').value = suma1;

Thus the value of the variable suma1 will be added to the attribute value of input

---

To create dynamically, just use document.createElement("input"), then just assign the value to the property value

Example:

function Sumar(element) {
  var n7 = document.getElementById('txtN7').value; /*Fator tempo*/
  var n8 = n7.replace(',', '.');
  var cem = (n8) / 4; /*Calculo de fator*/
  var n1 = document.getElementById('txtN1').value; /*100%*/
  var n2 = document.getElementById('txtN2').value; /*101%*/

  var suma = ((parseInt(n1) + parseInt(n2)) * cem); /*Resultado somenta dos valores de 100 e 101*/

  var n3 = document.getElementById('txtN3').value; /*95-99%*/
  var n4 = document.getElementById('txtN4').value; /*85%-94%*/
  var n5 = document.getElementById('txtN5').value; /*75%-84*/
  var n6 = document.getElementById('txtN6').value; /*50%-74%*/
  var n9 = document.getElementById('txtN9').value; /*No Match*/

  var suma1 = (((parseInt(n3) + parseInt(n4) + parseInt(n5) + parseInt(n6) + parseInt(n9)) * n8) + suma);
  

  /* Cria input e adiciona o valor da variável */
  let input = document.createElement("input");
  input.value = suma1;
  
  /* Inclui o input no elemento body */
  document.body.appendChild( input )
}

<input type="hidden" id="txtN1" value="1" />
<input type="hidden" id="txtN2" value="1" />
<input type="hidden" id="txtN3" value="1" />
<input type="hidden" id="txtN4" value="1" />
<input type="hidden" id="txtN5" value="1" />
<input type="hidden" id="txtN6" value="1" />
<input type="hidden" id="txtN7" value="1" />
<input type="hidden" id="txtN8" value="1" />
<input type="hidden" id="txtN9" value="1" />

<input type="button" onclick="Sumar();" value="Calcular Horas Tradução">

The document.write will serve to erase all the contents of the screen and replace with the specified value.

Answer 2

Your problem is that you are using Document.write, this command will replace the entire contents of your page. You must create a div to "print" the result, see the example below:

function Sumar() {
  var n7 = document.getElementById('txtN7').value; /*Fator tempo*/
  var n8 = n7.replace(',','.');   
  var cem = (n8)/4; /*Calculo de fator*/
  var n1 = document.getElementById('txtN1').value; /*100%*/
  var n2 = document.getElementById('txtN2').value; /*101%*/

  var suma = ((parseInt(n1) + parseInt(n2))*cem); /*Resultado somenta dos valores de 100 e 101*/

  var n3 = document.getElementById('txtN3').value; /*95-99%*/
  var n4 = document.getElementById('txtN4').value; /*85%-94%*/
  var n5 = document.getElementById('txtN5').value; /*75%-84*/
  var n6 = document.getElementById('txtN6').value; /*50%-74%*/
  var n9 = document.getElementById('txtN9').value; /*No Match*/

  var suma1 = (((parseInt(n3) + parseInt(n4)+ parseInt(n5)+parseInt(n6)+parseInt(n9))*n8)+suma);

  document.getElementById("resultado").innerHTML = suma1;
  /* alert("Número estimado em horas: "+suma1) */
}

The Document.write command is replaced by Document.getElementById("result"). innerHTML = suma1;

And you must create a div with this id as below

<input type="button" onclick="Sumar();" value="Calcular Horas Tradução">
<div id="resultado"></div>