Fiz um código simples pra uma tabuada usando o "for" só que ao personalizar pro resultado da tabuada sair impresso na DIV eu não consigo. Ele não carrega todos valores. Segue o código.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<script>
function calcular(){
let valor = document.querySelector('input#valor') // Pega valor digitado no input
let res = document.querySelector('div#resultado') // Pega div (onde deve inserir resultado)
let vfinal = valor.value // Pega o valor pra poder fazer a operação matemática
for(let y = 1; y <= 10; y++) {
let multiplicacao = (vfinal * y)
//document.write( y + ' x ' +valor.value+ ' = ' + (y * valor.value) + '<br>')
res.innerHTML = `${vfinal} x ${y} = ${multiplicacao} ` //
}
}
</script>
<style>
div {
border: 1px solid red;
width: 250px;
height: 350px;
}
</style>
</head>
<h1>Tabuada usando For</h1>
<p><input type="number" id="valor">
<input type="button" value="Calcular" onclick="calcular()"></p>
<p>
<div id="resultado">
Resultado aqui
</div>
</p>
<body>
</body>
</html>
Gostaria que o resultado saísse assim, conforme imagem:
res.innerHTML
atribui um novo conteúdo ao elementores
, por isso não estás a conseguir. Você pode usar a concatenação (usando sinal do +) para obter o resultado, para isso basta adicionarres.innerHTML = ''
(antes do for) eres.innerHTML += `${vfinal} x ${y} = ${multiplicacao}`
(dentro do for)