Print the result of a for JS inside a <p>

Asked

Viewed 144 times

8

I’m doing a college paper that consists of making a tabuada generator.

It’s working perfectly when I use it console.log to show the result, but when I use .innerHTML = resultado to display in a tag <p> it shows only one line of the result.

How do I show all lines as in console.log? Follows the code:

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>

javascript html function for

  • In the title you say you want in the <p> and in the text in the console.log...

  • sorry I ended up getting confused at the time of writing.

2 answers

6


It turns out that each resultado is calculated within the for on the same variable and therefore when the for ends, in the resultado is only the last calculation.

What you want is to concatenate the result in the form of text, to stay with the text/html that represents the whole table. There are several ways to do this, but one of the simplest is to use another variable to concatenate, and use that for the innerHTML.

Example (I removed your comments to focus on the changes I made):

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>

So that the multiplication table wasn’t weird, I also altered the beginning of the for for 1 in order to prevent it from appearing 0 x numero.

  • Thank you so much for the detailed explanation! You helped a beginner in Avascript a lot

  • +1 good answer.

2

It only needs a few simple modifications, the main one is that you did not increment the result before the result variable. How are you using innerHtmlyou can even use a <br> to stay one in each row.

Functioned:

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>

Browser other questions tagged javascript html function for

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