result: print JS variable value in td

Question

result: print JS variable value in td

Navigation

#1 by (0 votes)

0

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

Well, the logic is ready. I'm just having trouble displaying the result inside a 'pre-ready' table. It comes with the reference, type: $ 50 bills and I need to display the result of the variable on the front line;

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

Follow the code below:

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>

javascript tabela

asked by anonymous 23.01.2017 / 13:36

1 answer

Media queries or multiple style sheets? date function in html5 integrated with php

score 0 · Answer 1

A simple way would be to put an id in the td that will receive the value, and then assign using innerHTML , like this:

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>