A janela <input> some após impressão dos resultados. | Lógica de programação

Boa noite pessoal.

Fiz um programa simples que me dá a tabuada de qualquer número que for digitado no campo que eu declarei. Porém, após o resultado ser impresso, eu gostaria que a janela continuasse a ser mostrada, de forma a possibilitar que uma nova tabuada seja solicitada. Segue o código como está:

<meta charset="UTF-8">

<h1>Tabuada completa</h1>
<input>Infome a tabuada desejada</input>
<button>Ok</button>
<br>


<script>

var input = document.querySelector("input");
var button = document.querySelector("button");
input.focus();


function pulaLinha()
{
    document.write("<br>");
}

function imprime(frase)
{
    document.write(frase);
    pulaLinha();
}

function tabuada()
{
    var n = input.value;  // n é o número a ser multiplicado.

    var n2 = 0;              // n2 é o multiplicador.

    imprime("Tabuada do " + n);

    while(n2 <= 10)
    {
        imprime(n + " * " + n2 + " = " + (n * n2));
        n2++;

    }    

    pulaLinha();

}

button.onclick = tabuada;


</script>

Agradeço a ajuda.

Olá, Felipe. Tudo bem?

Agradeço por aguardar um retorno =)

Felipe, o método document.write() exclui todo o HTML existente quando usado em um documento. Ou seja, quando você utiliza este método dentro da função imprime(), ele exclui todo o seu input, e acabava sobreescrevendo todo o conteúdo com o resultado da tabuada.

Uma das soluções para resolver isto, é a gente modificar o conteúdo de uma tag HTML e não o documento inteiro.

Para isso, crie uma tag <p>, e vamos capturá-la através do querySelector():

<meta charset="UTF-8">

<h1>Tabuada completa</h1>
<input>Infome a tabuada desejada</input>
<button>Ok</button>
<p></p>
<br>


<script>

var input = document.querySelector("input");
var button = document.querySelector("button");
input.focus();

var p = document.querySelector("p")

Após isso, na função imprimir() devemos utilizar em p o método innerHTML que é utilizado para manipular o HTML, para este caso nós vamos adicionar a frase e uma quebra de linha através da tag <br>. Ou seja, cada vez que a função imprime for chamada, iremos adicionar um conteúdo HTML dentro da tag <p>.

Vale lembrar que foi utilizado o operador += significa que estamos adicionando conteúdo a um texto já existente ao invés de substituí-lo.

function imprime(frase)
{
    p.innerHTML += frase + "<br>";
}

Além disso, cada vez que chamarmos a função tabuada() devemos limpar o conteúdo já existente na tag <p>, através de p.innerHTML ="". Conforme a seguir:

function tabuada()
{
    p.innerHTML = "";
    var n = input.value;  // n é o número a ser multiplicado.

    var n2 = 0;              // n2 é o multiplicador.

    imprime("Tabuada do " + n);

    while(n2 <= 10)
    {
        imprime(n + " * " + n2 + " = " + (n * n2));
        n2++;

    }    
}

O resultado final ficou dessa forma:

<meta charset="UTF-8">

<h1>Tabuada completa</h1>
<input>Infome a tabuada desejada</input>
<button>Ok</button>
<p></p>
<br>


<script>

var input = document.querySelector("input");
var button = document.querySelector("button");
input.focus();

var p = document.querySelector("p")

function imprime(frase)
{
    p.innerHTML += frase + "<br>";
}

function tabuada()
{
    p.innerHTML = "";
    var n = input.value;  // n é o número a ser multiplicado.

    var n2 = 0;              // n2 é o multiplicador.

    imprime("Tabuada do " + n);

    while(n2 <= 10)
    {
        imprime(n + " * " + n2 + " = " + (n * n2));
        n2++;

    }    
}

button.onclick = tabuada


</script>

Espero ter ajudado =)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓

Garanta sua matrícula hoje e ganhe + 2 meses grátis