Problema com a tag input - operação aritmética

Programação
, , ,
#1

Olá, estou tentando construir um programa que capture um número digitado pelo usuário em um input e, ao clicar no botão ‘calcular’, exiba a tabuada da entrada. Dei uma pesquisada, porém não decifrei qual o problema. O chrome não acusa nenhum problema de sintaxe no console. Acredito que seja algum detalhe da tag input… Poderia me ajudar, por favor?

<!DOCTYPE html>
<html>
<head>
	<meta charset = "utf-8">
	<title>exfix01</title>
</head>

<body>
	<h1>Exercício de fixação - Lógica de Programação com JavaScript</h1>
	<p>Por favor, digite um número para ser calculado a tabuada:</p>
	<input/>
	<button>calcular</button>
</body>

<script>
	var multiplicador = document.querySelector("input");
	var botao = document.querySelector("button");

	function calculaTabuada () {
		for (var multiplicando = 0; multiplicando <= 10; multiplicando++){
			var resultado = multiplicador * multiplicando;
			document.write(multiplicador+" X "+multiplicando+" = "+resultado);
		}
	}

	botao.onClick = calculaTabuada;
</script>
</html>
#2

Tudo o que vc “puxa” do html vai para o js como texto, logo, numeros precisam de conversão…

var multiplicador = parseInt(document.querySelector("input").value);

Outra coisa, usando document.write, vc vai ter um comportamento de abrir uma outra janela quando clicar no botão, se não deseja essa comportamento, pesquise sobre innerHTML de uma div por exemplo…

1 curtida
#3

Pô, que bacana! Obrigado pela dica, irei pesquisar a respeito agora mesmo :slight_smile: