By displaying the result of the sum of two numbers I got "[Object Htmlinputelement]"

Asked

Viewed 420 times

-2

I am studying Javascript, and during this example I came across an error that I could not solve.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Somando Números</title>
</head>
<body>
    <h1>Somando Valores</h1>
    <input type="number" name="txtn1" id="txtn1"> +
    <input type="number" name="txtn2" id="txtn2">
    <input type="button" value="Somar" onclick="somar()">
    <div id="res">Resultado</div>
    <script>
        function somar() {
            let tn1 = window.document.getElementById('txtn1')
            let tn2 = window.document.getElementById('txtn2')
            let res = window.document.getElementById('res')
            let n1 = Number(tn1.value)
            let n2 = Number(tn2.value)
            let s = n1 + n2
            res.innerHTML = `A soma entre ${tn1} e ${tn2} é ${res}`
        }
    </script>
</body>
</html>

When adding up the numbers, the result that comes to me is this:

" The sum between [Object Htmlinputelement] and [Object Htmlinputelement] is [Object Htmldivelement]

javascript
  • 6

    Was what you wanted to do not res.innerHTML = \The sum between ${n1} and ${N2} is ${s}`` ?

1 answer

5

The problem is not the sum but what you are adding up.

tn1 and tn2 are references to the inputs:

let tn1 = window.document.getElementById('txtn1')
let tn2 = window.document.getElementById('txtn2')

Already res is a reference to a div:

let res = window.document.getElementById('res')

Curious is further on in the code you have defined n1 and n2 which are the values of the input:

let n1 = Number(tn1.value)
let n2 = Number(tn2.value)

Also defined s which is the result of the sum:

let s = n1 + n2

So to repair your code just put the line:

res.innerHTML = `A soma entre ${n1} e ${n2} é ${s}`

in place of:

res.innerHTML = `A soma entre ${tn1} e ${tn2} é ${res}`


function somar() {
  let tn1 = window.document.getElementById('txtn1');
  let tn2 = window.document.getElementById('txtn2');
  let res = window.document.getElementById('res');
  let n1 = Number(tn1.value);
  let n2 = Number(tn2.value);
  let s = n1 + n2;
  // Aqui foi feita a modificação
  res.innerHTML = `A soma entre ${n1} e ${n2} é ${s}`;
}
<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Somando Números</title>
</head>

<body>
  <h1>Somando Valores</h1>
  <input type="number" name="txtn1" id="txtn1"> +
  <input type="number" name="txtn2" id="txtn2">
  <input type="button" value="Somar" onclick="somar()">
  <div id="res">Resultado</div>

</body>

</html>

  • @Angustivasques A suggestion to decrease the code:let n1 = +tn1.value;&#xA; let n2 = +tn2.value;&#xA;

  • 3

    @Maurydeveloper Depending on what is typed, not always the + works the same way: https://stackoverflow.com/a/17106701 - There is also the option to use parseInt, which also differs in some cases: https://stackoverflow.com/q/4090518 - Of course if a valid number is entered, it does not matter, but depending on how you want to treat the special cases, it makes a difference (and then you use what makes sense, because it’s not just because the code got smaller that necessarily got "better")

  • Well, thank you to everyone who helped.

  • 3

    @Maurydeveloper On "minor code not necessarily better": https://answall.com/a/400495/112052

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.