8

Estou fazendo um trabalho da faculdade que consiste em fazer um gerador de tabuada.

Ele está funcionando perfeitamente quando uso console.log para mostrar o resultado, mas quando uso .innerHTML = resultado para mostrar em uma tag <p> ele mostra apenas uma linha do resultado.

Como faço para mostrar todas as linhas assim como no console.log? Segue o código:

function calcularTabuada(){

    //pegar o valor do input digite um numero
    let nun = parseInt(document.querySelector('#nun').value);




    //Calculo da Tabuada
    for (let i = 0; i <= 10; i++) {

        var resultado = (`${i} X ${nun} = ${i*nun}`);

         // console.log(resultado)
    }

    //pegar o valor da tabuada

    // var tabuadatxt = document.querySelector('#tabuadatxt').value;

    //imprime tabuada no HTML
    tabuadatxt.innerHTML = resultado;

}
/* =============== CORPO  =============== */
body{
    background-color: #3D3D3D;
    font-family: Roboto;
}
#tabuada{
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    background-color: #212529;
    border-radius: 10px;
    box-shadow: 2px 3px 7px black ;
    display: flow;
}
/* =============== TIPOGRAFIA  =============== */
#tabuada h1{
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
}
/* =============== INPUT  =============== */

#nun{
    width: 200px;
    height: 50px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    border: solid 3px #f5ba04;
    background-color: white;
    color: black;
    font-size:12pt;
    text-transform: uppercase;

}

#tabuadatxt{
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 15pt;
}
/* =============== BOTÃO  =============== */
#buttoncalc{
    width: 150px;
    height: 55px;
    text-align: center;
    font-weight: bold;
    border: #F5BA04 solid;
    border-radius:  10px;
    background-color: transparent;
    color: #f5ba04;
    font-size:14pt;
    text-transform: uppercase;
}
#buttoncalc:hover{
    border: #212529 solid;
    background-color: #F5BA04;
    color: #212529;
    transition: 0.3s;

}
/* =============== FRAMWORK  =============== */
.espaçamentobuttom{
    margin-bottom: 2em;
}
.espaçamentotop{
    margin-top: 2em
}
<!doctype html>
<html lang="pt-br">
    <head>
        <!-- Required meta tags -->

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!--CSS Bootstrap-->

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!--CSS-->


        <link rel="stylesheet" href="css/tabuada.css">
        <title>Tabuada</title>
    </head>
    <body>

    <div class="espaçamentotop row"  id="tabuada">

        <h1 class="w-100">Gerador de tabuada</h1>


        <input class="w-100 espaçamentobuttom" id="nun" type="text" placeholder="digite um número">

        <button onclick="calcularTabuada()" class="col-md-12" id="buttoncalc">Calcular</button>

        <p class="w-100 espaçamentotop" id="tabuadatxt">

        </p>



    </div>

        <!-- JavaScript -->
        <script src="js/tabuada.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

2
  • No título vc diz que quer no <p> e no texto no console.log...
    – Sam
    8/11/2018 às 22:32
  • perdão acabei me confundindo na hora de escrever. 8/11/2018 às 22:35

2 Respostas 2

6

Acontece que cada resultado é calculado dentro do for sobre a mesma variavel e por isso quando o for termina, no resultado fica apenas o ultimo calculo.

O que você pretende é ir concatenando o resultado na forma de texto, para ficar com o texto/html que representa a tabela toda. Tem varias formas de fazer isso, mas uma das mais simples é utilizar outra variavel para concatenar, e usar essa para o innerHTML.

Exemplo (retirei os seus comentários para focar as alterações que eu fiz):

function calcularTabuada(){
    let nun = parseInt(document.querySelector('#nun').value);
    let novoHtml = ""; //nova variavel para concatenar os resultados

    for (let i = 1; i <= 10; i++) {
        var resultado = (`${i} X ${nun} = ${i*nun}`);
        novoHtml += resultado + "<br>"; //concatenar e adicionar uma quebra de linha
    }

    tabuadatxt.innerHTML = novoHtml; //colocar o resultado da concatenação
}
/* =============== CORPO  =============== */
body{
    background-color: #3D3D3D;
    font-family: Roboto;
}
#tabuada{
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    background-color: #212529;
    border-radius: 10px;
    box-shadow: 2px 3px 7px black ;
    display: flow;
}
/* =============== TIPOGRAFIA  =============== */
#tabuada h1{
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
}
/* =============== INPUT  =============== */

#nun{
    width: 200px;
    height: 50px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    border: solid 3px #f5ba04;
    background-color: white;
    color: black;
    font-size:12pt;
    text-transform: uppercase;

}

#tabuadatxt{
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 15pt;
}
/* =============== BOTÃO  =============== */
#buttoncalc{
    width: 150px;
    height: 55px;
    text-align: center;
    font-weight: bold;
    border: #F5BA04 solid;
    border-radius:  10px;
    background-color: transparent;
    color: #f5ba04;
    font-size:14pt;
    text-transform: uppercase;
}
#buttoncalc:hover{
    border: #212529 solid;
    background-color: #F5BA04;
    color: #212529;
    transition: 0.3s;

}
/* =============== FRAMWORK  =============== */
.espaçamentobuttom{
    margin-bottom: 2em;
}
.espaçamentotop{
    margin-top: 2em
}
<!doctype html>
<html lang="pt-br">
    <head>
        <!-- Required meta tags -->

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!--CSS Bootstrap-->

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!--CSS-->


        <link rel="stylesheet" href="css/tabuada.css">
        <title>Tabuada</title>
    </head>
    <body>

    <div class="espaçamentotop row"  id="tabuada">

        <h1 class="w-100">Gerador de tabuada</h1>


        <input class="w-100 espaçamentobuttom" id="nun" type="text" placeholder="digite um número">

        <button onclick="calcularTabuada()" class="col-md-12" id="buttoncalc">Calcular</button>

        <p class="w-100 espaçamentotop" id="tabuadatxt">

        </p>



    </div>

        <!-- JavaScript -->
        <script src="js/tabuada.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Para que a tabuada não ficasse estranha, alterei também o inicio do for para 1 a fim de evitar que apareça 0 x numero.

2
  • Muito Obrigado pela explicação detalhada! Ajudou muito um iniciante em javaScript 8/11/2018 às 22:57
  • +1 boa resposta.
    – Sam
    9/11/2018 às 5:28
2

Precisa apenas algumas modificações simples, o principal delas é que você não incrementou o resultado anterior a variável resultado. Como está usando innerHtmldá até pra usar um <br> pra ficar um em cada linha.

Funcionado:

function calcularTabuada() {
	let nun = parseInt(document.querySelector('#nun').value);

	var resultado = ''
	for (let i = 0; i <= 10; i++) {
		resultado += `${i} X ${nun} = ${i* nun}<br>`;
	}
	tabuadatxt.innerHTML = resultado;
}
/* =============== CORPO  =============== */
body{
    background-color: #3D3D3D;
    font-family: Roboto;
}
#tabuada{
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    background-color: #212529;
    border-radius: 10px;
    box-shadow: 2px 3px 7px black ;
    display: flow;
}
/* =============== TIPOGRAFIA  =============== */
#tabuada h1{
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
}
/* =============== INPUT  =============== */

#nun{
    width: 200px;
    height: 50px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    border: solid 3px #f5ba04;
    background-color: white;
    color: black;
    font-size:12pt;
    text-transform: uppercase;

}

#tabuadatxt{
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 15pt;
}
/* =============== BOTÃO  =============== */
#buttoncalc{
    width: 150px;
    height: 55px;
    text-align: center;
    font-weight: bold;
    border: #F5BA04 solid;
    border-radius:  10px;
    background-color: transparent;
    color: #f5ba04;
    font-size:14pt;
    text-transform: uppercase;
}
#buttoncalc:hover{
    border: #212529 solid;
    background-color: #F5BA04;
    color: #212529;
    transition: 0.3s;

}
/* =============== FRAMWORK  =============== */
.espaçamentobuttom{
    margin-bottom: 2em;
}
.espaçamentotop{
    margin-top: 2em
}
<!doctype html>
<html lang="pt-br">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!--CSS Bootstrap-->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <!--CSS-->
      <link rel="stylesheet" href="css/tabuada.css">
      <title>Tabuada</title>
   </head>
   <body>
      <div class="espaçamentotop row"  id="tabuada">
         <h1 class="w-100">Gerador de tabuada</h1>
         <input class="w-100 espaçamentobuttom" id="nun" type="text" placeholder="digite um número">
         <button onclick="calcularTabuada()" class="col-md-12" id="buttoncalc">Calcular</button>
         <p class="w-100 espaçamentotop" id="tabuadatxt">
         </p>
      </div>
      <!-- JavaScript -->
      <script src="js/tabuada.js"></script>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
   </body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .