Javascript Como criar uma tabuada usando for, option e select ?

ElitePreta · 22 de janeiro de 2022

Já tentei de todas as formas imprimir o resultado de 1 a 10 nesta tabuada, mas ele só considera o "i" como 10 e exibe somente esse resultado na option. Alguém pode me ajudar?

meu código:

js=

function confirmar () {
  var n1 = Number.parseInt(document.getElementById('num').value)
  var opt = document.getElementById('opção')
  var cp = document.getElementById('campo')
  opt.text = ""
  cp.add(opt)
  if (document.getElementById('num').value == "" || document.getElementById('num').value >= 1001 || isNaN(n1)) {
    alert('deu problema!')  
  } else { for(let i=1; i<=10; i = i++) {
       var mult = n1*i
       opt.innerHTML = `${n1} x ${i} = ${mult}`
      } 
    }
}

html =

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Tabuada de Multiplicação</title>
 
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div>
    <p>Insira um número:</p> <input type="text" name="numero" id="num"><br>  
    <select id="campo">
    <option id="opção" value="v1" hidden></option>
    </select>
    <br><input type="button" value="confirmar" onclick="confirmar()">
  </div>
  <script src="main.js"></script>
</body>
</html>

css =

body {
    font-size: 15pt;
    background: skyblue;
}

select {
  width: 205px;
  height: 200px;
  margin-top: 10px;
  box-shadow: 5px 5px 6px dimgray;
  border-radius: 15px;
}

input[type=text] {
  background: whitesmoke;
  box-shadow: 5px 2px 2px dimgray;
  border-radius: 10px;
}

input[type=button] {
  margin-top: 10px;
  border-radius: 10px;
}

DiF · 23 de janeiro de 2022

@ElitePreta Olá, Não é exatamente com seu código, mas desenvolvi de um outro jeito.. usando o jQuery.

É bem mais simples de entender do que o código apresentado.

Estude ele e tente entender como funciona.

Basicamente, é um loop, de 1 a 11. Pois você quer calcular a partir do 1 e até o número 10.

A cada requisição, primeiramente o select é zerado com a função empty() e depois ele faz o cálculo baseado no valor que for digitado no campo input. Veja o código:

HTML:

<input type="text" placeholder="Insira o multiplicador" id="multiplicador">
<input type="button" value="Ver taboada" id="btn"/>
<select id="taboada"></select>

Jquery:

$(document).ready(function(){
    $("#btn").on("click", function(){
      
      //zera primeiro ao clicar no botão
      $("#taboada").empty(); 
      
      //pega o valor digitado no campo input
      let multiplicador = $("#multiplicador").val();
      
      //Faz um loop de 1 a 10
      for (i = 1; i < 11; i++){ 
      
      //armazena em uma variavel o calculo da taboada  
      let calculo = i * multiplicador;
      
     //insere resultado do calculo, onde o value é o próprio numero contado e o text é a taboada em si   
     $('#taboada').append($('<option>',{
        value: i,
        text : i + " x " + multiplicador + " = " + calculo 
       }));
     }
     
     });
});