<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>somando valores</title>
<style>
*{
font: normal 20pt arial;
}
div{
width: 300px ;
height: 100px;
margin-top: 50px;
background: rgb(47, 47, 255);
color: white;
text-align: center;
line-height: 90px;
}
</style>
</head>
<body>
<h1>somando valores</h1>
<input type="number" name="txtn1" id="txtn1" >
<input type="number" name="txtn2" id="txtn2" >
<div id="somar"> somar </div>
<p id="resultado">?</p>
<script>
var n1 = Number(document.getElementById('txtn1').innerHTML);
var n2 = Number(document.getElementById('txtn2').innerHTML);
var soma = document.getElementById('somar');
soma.addEventListener('click', operacaoSoma);
function operacaoSoma(){
document.getElementById('resultado').innerHTML = n1+n2;
}
</script>
</body>
</html>
-
Relacionada: pt.stackoverflow.com/questions/134453/…– Wallace VizerraCommented 6/01/2021 às 14:29
Adicione um comentário
|
1 Resposta
Você tem dois erros no seu script, o primeiro deles é que a tag <input>
não dá o seu valor na propriedade innerHTML
, mas sim na propriedade value
, é nessa propriedade que você está interessado. Neste caso você deve pegar os valores por:
var n1 = Number(document.getElementById("txtn1").value);
var n2 = Number(document.getElementById("txtn2").value);
O segundo erro está em pegar o valor no começo do script e não atualizá-lo, sendo assim as variáveis n1 e n2 sempre vão ter os valores dos inputs ao carregar a página e não o valor ao apertar o botão.
O script corrigido fica assim:
/* Pegando a referência aos inputs */
const n1 = document.getElementById("txtn1");
const n2 = document.getElementById("txtn2");
/* Adicionando evendo ao botão */
const soma = document.getElementById("somar");
soma.addEventListener("click", operacaoSoma);
function operacaoSoma() {
/// Pegando os valores no momento do click
const input1 = Number(n1.value);
const input2 = Number(n2.value);
/// Mostrando a soma
document.getElementById("resultado").innerHTML = input1 + input2;
}
* {
font: normal 20pt arial;
}
div {
width: 300px;
height: 100px;
margin-top: 50px;
background: rgb(47, 47, 255);
color: white;
text-align: center;
line-height: 90px;
}
<h1>somando valores</h1>
<input type="number" name="txtn1" id="txtn1">
<input type="number" name="txtn2" id="txtn2">
<div id="somar"> somar </div>
<p id="resultado">?</p>
-
muito obrigado pela ajuda, eu ja tinha tentado de varias maneiras e n tinha dado certo kkk ;-; Commented 8/01/2021 às 8:47