Javascript tabulated result inside a DIV

Asked

Viewed 142 times

0

I made a simple code for a table using "for" only when customizing for the result of the table to be printed in the DIV I can’t. It does not load all values. Follow the code.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JavaScript</title>
  <script>
    function calcular(){
      let valor = document.querySelector('input#valor') // Pega valor digitado no input
      let res = document.querySelector('div#resultado') // Pega div (onde deve inserir resultado)
      let vfinal = valor.value // Pega o valor pra poder fazer a operação matemática
          
      for(let y = 1; y <= 10; y++) {
        
      let multiplicacao = (vfinal * y)
      //document.write( y + ' x ' +valor.value+ ' = ' + (y * valor.value) + '<br>')
      res.innerHTML = `${vfinal} x ${y} = ${multiplicacao} ` // 

      }
    }
  </script>
  <style>
    div {
      border: 1px solid red;
      width: 250px;
      height: 350px;
    }
  </style>

</head>

<h1>Tabuada usando For</h1>
<p><input type="number" id="valor">
<input type="button" value="Calcular" onclick="calcular()"></p>
<p>
  <div id="resultado">
    Resultado aqui
  </div>
</p>
<body>
</body>

</html>

I would like the result to come out like this, according to image:

Como gostaria que saísse

javascript for div

  • The res.innerHTML assigns a new content to the element res, so you’re not getting it. You can use the concatenation (using +sign) to get the result, just add res.innerHTML = '' (before the is) and res.innerHTML += \${vfinal} x ${y} = ${multiplication}`` (inside the for)

2 answers

-1

As already stated in a comment, you are assigning a new content to your div every iteration of your loop, you must concatenate the value and close the line using a tag <br/>, simply replacing:

res.innerHTML = `${vfinal} x ${y} = ${multiplicacao} `

for:

res.innerHTML += `${vfinal} x ${y} = ${multiplicacao} <br/>`;

and resetting the contents of your div by placing the following line before the for:

  res.innerHTML = "Resultado aqui <br/>";


function calcular() {
  let valor = document.querySelector("input#valor"); // Pega valor digitado no input
  let res = document.querySelector("div#resultado"); // Pega div (onde deve inserir resultado)
  let vfinal = valor.value; // Pega o valor pra poder fazer a operação matemática
  res.innerHTML = "Resultado aqui <br/>";
  for (let y = 1; y <= 10; y++) {
    let multiplicacao = vfinal * y;
    //document.write( y + ' x ' +valor.value+ ' = ' + (y * valor.value) + '<br>')

    res.innerHTML += `${vfinal} x ${y} = ${multiplicacao} <br/>`; //
  }
}
div {
  border: 1px solid red;
  width: 250px;
  height: 350px;
}
<h1>Tabuada usando For</h1>
<p><input type="number" id="valor">
  <input type="button" value="Calcular" onclick="calcular()">
</p>
<p>
<div id="resultado">
  Resultado aqui
</div>
</p>

-1

There’s another way to do it

  • HTML

      <input class="form-control mb-3" type="number" name="num" id="nu1">
       <input type="button" class="btn btn-dark p-2" value="Gerar tabuada" onclick="tabuada()"></input> 
     </div>
     <div class="card-footer text-muted">
       <select class="form-select text-center fs-1 " name="tabuada" id="seltab" size="10"></select>
     </div>

  • Script

       function tabuada() {
   let num = document.getElementById('nu1')
   let tab = document.getElementById('seltab')
   if(num.value.length == 0) {
       window.alert('Por favor digite o numero')
   }else {
       let n = Number(num.value)
       let c = 1
       tab.innerHTML = ''
       while( c <= 10) {
           let item = document.createElement('option')
           item.text = `${n} X ${c} = ${n*c}`
           tab.value = `tab${c}`
           tab.appendChild(item)
           c++
       }
   }

    }

  • Testing

function tabuada() {
          let num = document.getElementById('nu1')
          let tab = document.getElementById('seltab')
          if(num.value.length == 0) {
              window.alert('Por favor digite o numero')
          }else {
              let n = Number(num.value)
              let c = 1
              tab.innerHTML = ''
              while( c <= 10) {
                  let item = document.createElement('option')
                  item.text = `${n} X ${c} = ${n*c}`
                  tab.value = `tab${c}`
                  tab.appendChild(item)
                  c++
              }
          } 
      }
     <input class="form-control mb-3" type="number" name="num" id="nu1">
              <input type="button" class="btn btn-dark p-2" value="Gerar tabuada" onclick="tabuada()"></input> 
            </div>
            <div class="card-footer text-muted">
              <select class="form-select text-center fs-1 " name="tabuada" id="seltab" size="10"></select>
            </div>

Browser other questions tagged javascript for div

You are not signed in. Login or sign up in order to post.