The problem [Object Htmlinputelement] appears in a Function in JS

Asked

Viewed 28 times

-2

I’m starting in the html area, so I come here to ask about a problem decorrent in my code: I created an input of type text (where the person will by his name), and for the name of the person to appear in my page, I used an input of type Boton to confirm his name, where in the script area I created a Function to activate the name text in html, but there is a problem arising in relation to the [Object Htmlinputelement], and I come auqi ask for the help of some experts, thank you for the attention. HERE IS THE CODE:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculadora_avanced</title>
    <style>
        body{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>Olá!</h1>
    <div style="text-align: ;"><input type="text" id="usuarioname" name="usuarioname" value="Qual seu nome?" >
    <input type="button" id="entername" value="confirmar" onclick="entername()">
    </div>
    <div id="nemers" style="text-align: ;"></div>
    <script>
        function entername() {
            var namers = window.document.getElementById('nemers')
            var na = window.document.getElementById('usuarioname')
            namers.innerText = `Olá ${na} , como vai?`

        }
    </script>
</body>
</html>

javascript html
  • 1

    Good morning. Edith your question to add more details and clarifications regarding the problem presented, so that we can answer your question.

1 answer

1

The Element input[type=text] must have the attribute value accessed so you can display the value typed in it.

Change your code to:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculadora_avanced</title>
    <style>
        body{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>Olá!</h1>
    <div style="text-align: ;"><input type="text" id="usuarioname" name="usuarioname" value="Qual seu nome?" >
    <input type="button" id="entername" value="confirmar" onclick="entername()">
    </div>
    <div id="nemers" style="text-align: ;"></div>
    <script>
        function entername() {
            var namers = window.document.getElementById('nemers')
            var na = window.document.getElementById('usuarioname')
            namers.innerText = `Olá ${na.value} , como vai?`

        }
    </script>
</body>
</html>

If you use the function console.log(na) and view in the Browser Console, you will see that will be returned the input.

Javascript converts the object to its name when you try to use it as a string, which generated "[Object Htmlinputelement]" in your code.

Use the attribute value whenever you want to access/change the input value of your HTML through Javascript.

Further information in the documentation of MDN

Browser other questions tagged javascript html

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