Tabuada do :
<script>
var botao = document.querySelector('.botao');
// var numero = document.querySelector('.numero');
var tabuada = document.querySelector('.tabuada');
var resultado = document.querySelector('.resultado');
function botaoHandler() {
for (var i = 1; i <=10; i++) {
resultado.textContent = console.log(tabuada.value * i);
}
}
botao.addEventListener('click', botaoHandler);
Oi, Alexandre, tudo bem?
Eu adaptei um pouco o que você deseja, testa e me fala se é isso:
<!doctype html>
<html lang="pt-br">
<head>
<title>Tabuada</title>
<meta charset="utf-8" />
</head>
<body>
<style>
body{
text-align:left;
background-color: lightcyan;
}
#container{
text-align:left;
}
</style>
<h1>Div com Tabuada </h1>
<form>
<div>
<p>Qual tabuada deseja saber? </p>
<input type="text" name="numero" id="number" required />
<button type="button" onclick="tabuada();">Calcular</button>
</div>
<br />
<div id="container"></div>
</form>
<script>
function tabuada(){
let number = parseInt(document.getElementById("number").value);
document.getElementById("container").innerHTML = "";
for (let i = 0; i < 11; i++ ) {
document.getElementById("container").innerHTML += number + " x " + i + " = " + (number * i)+"<br />";
}
}
</script>
</body>
</html>