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 ✓