Print the result of a for JS within a p

Question

Print the result of a for JS within a p

Navigation

#1 by (5 votes)
#2 by (1 votes)

7

I'm doing a college job that consists of making a tabletop generator.

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

How do I show all rows as well as console.log ? Here is 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 for

asked by anonymous 08.11.2018 / 23:30

2 answers

1

It only needs a few simple modifications, the main one is that you did not increment the previous result to the variable result. Since you are using innerHtml , you can even use a <br> to get one on each line.

Run:

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>

08.11.2018 / 23:56

Double rule in LIMIT How to make a text reflected with CSS? (type a mirrored text)

score 5 · Accepted Answer

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

What you intend is to go concatenating 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 innerHTML .

Example (I've removed your comments to focus on the changes I've 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>

In order for the table to not be strange, I also changed the start of for to 1 to prevent 0 x numero from appearing.