Javascript error [Object Htmldivelement]

Question

I do not know what to do to have the correct result with this code. Because whenever I have checked it returns me this result.

I tried to make use of the document.querySelector. But the error [Object Htmldivelement] remains. I needed you where you are res.innerHTML = `Você nasceu em ${pais}` Be replaced by the string I put inside the inputs.

        <h1>Validação de País</h1>
        <div id="nome">
            Digite seu nome: <input type="text" name="nome" id="nome">
        </div>
        <div id="pais">
            Digite seu pais:&nbsp;&nbsp; <input type="text" name="pais" id="pais">
        </div>
        <div id="button">
             <input type="button" value="Conferir" onclick="conferir()">

        </div>
        <div id="res">Resultado:</div>
    </main>

    <script>

        function conferir(){
            var pais = document.getElementById('pais')
            //var pais = document.querySelector('div#pais')
            var nome = document.getElementById('nome')
            var res = document.getElementById('res')

            res.innerHTML = `Você nasceu em ${pais}`
        }


    </script> ```

Answer 1

Are two typo their

The method var pais = document.getElementById('pais') takes the element and not the value injected into the element

And NEVER repeat Ids, as said in Why it is considered wrong/bad to repeat an HTML ID?, you repeated here:

<div id="pais">
    Digite seu pais:&nbsp;&nbsp; <input type="text" name="pais" id="pais">

And in other places

Change to:

<div id="nome">
    Digite seu nome: <input type="text" name="nome" id="nomeField">
</div>
<div id="pais">
    Digite seu pais:&nbsp;&nbsp; <input type="text" name="paisField" id="pais">
</div>
<div id="button">
     <input type="button" value="Conferir" onclick="conferir()">

</div>

The fields nameField and paisField are just examples, you can choose other names as long as you never repeat the Ids.

And to get the value you must use the property .value, thus:

var pais = document.getElementById('paisField')
var nome = document.getElementById('nomeField')
var res = document.getElementById('res')

res.innerHTML = `Você nasceu em ${pais.value}`

Or so:

var pais = document.getElementById('paisField').value //.value aqui

var nome = document.getElementById('nomeField')
var res = document.getElementById('res')

res.innerHTML = `Você nasceu em ${pais}`