Show result inside a div without load on the page

Question

Show result inside a div without load on the page

Asked 5 years, 4 months ago

Viewed 110 times

-1

I created a home screen where you put the value you want to be displayed on the table. However, when you click the button it jumps to another screen.. wanted him to display on the same screen that is already stylized.

How can I do it? I’m using Document.write...

Code:

<div class="calculadora">

    <h1>Digite o número que deseja saber a tabuada :</h1> <input type="text" maxlength="2" id="txtNumero">
    <button onclick="calcular()">Calcular</button>

    <div id="resultado">
    </div>
</div>

<script>



    function calcular() {
        numero = document.getElementById("txtNumero").value;


        for (i = 0; i < 11; i++) {

            document.write(`<br>${numero} X ${i} = ${numero * i} <br>`);
        }

    }

</script>

2 answers

Browser other questions tagged javascript html5

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

by Andre • **5,836** points · Answer 1 · 2019-07-04T23:37:56+00:00

You are not "jumping" to another screen, you are overwriting the existing one with document.write.

If you don’t want to lose your page’s HTML, create an element like a div, and then attach your text to that element. I even believe that in your code, this div resultado has already been created for this purpose, no?

function calcular() {
    var numero = document.getElementById("txtNumero").value;
    var elemResultado = document.getElementById("resultado");
    elemResultado.innerHTML = '';

    for (var i = 0; i < 11; i++) {
        elemResultado.innerHTML += `<br>${numero} X ${i} = ${numero * i} <br>`;
    }
}

by Leandro Nascimento • 81 points · Answer 2 · 2019-07-05T00:08:33+00:00

You are not skipping to another page note your URL is the same. The logic problem is that you are using the method write() this method it is used most of the time for testing and not for projects like the one you made, because if an html document is completely rendered by the browser and write() is present he will completely delete your document. It was your case you added html to your page and then called the white() and resulated it deleted your html. Use this method only for small test to solve this created this simple solution.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="calculadora">
    <h1>Digite o número que deseja saber a tabuada :</h1> <input type="text" maxlength="2" id="txtNumero">
    <button onclick="calcular()">Calcular</button>
  </div>
<script>
    function calcular() {
        numero = document.getElementById("txtNumero").value;
        
        for (i = 0; i < 11; i++) {
            var p = document.createElement("p");
            document.body.appendChild(p);
            p.innerHTML = (`<br>${numero} X ${i} = ${numero * i} <br>`);
        }
    }
</script>
</body>
</html>

Hardly changed at all I just did that every time for run it will create a paragraph and add in body and the result will be implemented in the paragraph :).