result: print JS variable value in <td>

Question

I am developing a code in which the user inserts the value to be downloaded, in the result is presented the amount of ballots of each value that will be released in the operation.

Well, the logic is already ready. I’m only having difficulty to display the result inside a 'pre-ready' table. It comes with the reference, type: Banknotes of R $ 50,00 and need to display the result of the variable on the front line;

I really have no idea how to do this, through a function?

Follows code:

HTML

<div class="form-group">
   <label class="col-md-4 control-label" for="textinput">Valor do saque
   </label>  
   <div class="col-md-2">
      <input id="textinput" name="textinput" value="" type="number" placeholder="R$ 00,00" class="form-control input-md" required=true>
   </div>
</div>
<div class="form-group">
   <label class="col-md-4 control-label" for="button1id">
   </label>
   <div class="col-md-8">
      <button id="button1id" value="Enviar"  name="button1id" class="btn btn-success" onClick="Enviar()">Confirmar
      </button>
      <button id="button2id" name="button2id" class="btn btn-danger">Cancelar
      </button>
   </div>
</div>
<div class="container">
   <table class="table table-striped" id="table_result">
      <tr>
         <th> Cédulas disponíveis </th>
         <th> Quantidade por cédula </th>
      </tr>
      <tr>
         <td> Cédulas de R$ 50,00 </td>
         <td> aqui deve ser exibido o valor da varíavel n50 </td>
      </tr>
      <tr>
         <td> Cédulas de R$ 20,00 </td>
         <td> aqui deve ser exibido o valor da varíavel n20 </td>
      </tr>
      <tr>
         <td> Cédulas de R$ 5,00 </td>
         <td> aqui deve ser exibido o valor da varíavel n5 </td>
      </tr>
      <tr>
         <td> Cédulas de R$ 1,00 </td>
         <td> aqui deve ser exibido o valor da varíavel n1 </td>
      </tr>
   </table>
</div>

JS

   <script language="JavaScript">
    function Enviar() {

        var n50, n20, n5, n1, valor, restv, qtd_n, valor_i;

        n50 = 0;
        n20 = 0;
        n5 = 0;
        n1 = 0;
        valor = 0;
        restv = 0;
        qtd_n = 0;
        valor_i = 0;

        valor_i = document.getElementById('textinput').value;
        valor = valor_i;

        console.log(valor_i)

        if (valor <= 0) {

            window.alert("Atenção: digite um valor acima de R$ 00,00!");

        } else {

            while (valor > 0)

            {

                if (valor >= 50) {

                    n50 = parseInt(valor / 50);
                    restv = (valor % 50);
                } else if (valor >= 20 && valor < 50) {

                    n20 = parseInt(valor / 20);
                    restv = (valor % 20);

                } else if (valor >= 5 && valor < 20) {

                    n5 = parseInt(valor / 5);
                    restv = (valor % 5);

                } else if (valor >= 1 && valor < 5) {

                    n1 = parseInt(valor / 1);
                    restv = (valor % 1);
                }

                valor = restv;


            };

            document.write("O valor a ser sacado é: R$ ", valor_i, "<br/> Distribuído da seguinte forma: <br/>", n50, " notas de        R$ 50,00 <br/>", n20, " notas de R$ 20,00<br/>", n5, " notas de R$ 5,00 <br/>", n1, " notas de R$ 1,00");

        };

    }
</script>

Answer 1

A simple way would be to put an id on td which will receive the value, and then assign using the innerHTML, thus:

function Enviar() {

  var n50, n20, n5, n1, valor, restv, qtd_n, valor_i;

  n50=0;
  n20=0;
  n5=0;
  n1=0;
  valor=0;
  restv=0;
  qtd_n=0;
  valor_i=0;

  valor_i=document.getElementById('textinput').value;
  valor=valor_i;

  console.log(valor_i)

  if  (valor <= 0) {

    window.alert("Atenção: digite um valor acima de R$ 00,00!");

  }   else {

    while (valor>0) 

    {

      if (valor>=50) {

        n50=parseInt(valor/50);
        restv=(valor%50);
      } 
      else if (valor>=20 && valor< 50) {

        n20=parseInt(valor/20);
        restv=(valor%20);

      } 
      else if (valor>=5 && valor<20) {

        n5=parseInt(valor/5);
        restv=(valor%5);

      }
      else if (valor>= 1 && valor<5) {

        n1=parseInt(valor/1);
        restv=(valor%1);
      }

      valor=restv;


    }; 
    
    td50.innerHTML = n50;
    td20.innerHTML = n20;
    td5.innerHTML = n5;
    td1.innerHTML = n1;

  };

}

<div class="form-group">
  <label class="col-md-4 control-label" for="textinput">Valor do saque
  </label>  
  <div class="col-md-2">
    <input id="textinput" name="textinput" value="" type="number" placeholder="R$ 00,00" class="form-control input-md" required=true>
  </div>
</div>

<div class="form-group">
  <label class="col-md-4 control-label" for="button1id">
  </label>
  <div class="col-md-8">
    <button id="button1id" value="Enviar"  name="button1id" class="btn btn-success" onClick="Enviar()">Confirmar
    </button>
    <button id="button2id" name="button2id" class="btn btn-danger">Cancelar
    </button>
  </div>
</div>


<div class="container"> 
  <table class="table table-striped" id="table_result">

    <tr>
      <th> Cédulas disponíveis </th>
      <th> Quantidade por cédula </th>
    </tr>
    <tr>
      <td> Cédulas de R$ 50,00 </td>
      <td id="td50"> aqui deve ser exibido o valor da varíavel n50 </td>
    </tr>
    <tr>
      <td> Cédulas de R$ 20,00 </td>
      <td id="td20"> aqui deve ser exibido o valor da varíavel n20 </td>
    </tr>
    <tr>
      <td> Cédulas de R$ 5,00 </td>
      <td id="td5"> aqui deve ser exibido o valor da varíavel n5 </td>
    </tr>
    <tr>
      <td> Cédulas de R$ 1,00 </td>
      <td id="td1"> aqui deve ser exibido o valor da varíavel n1 </td>
    </tr>

  </table>
</div>