My code is showing this error. [Object Htmlinputelement] Nan [Object Nodelist]

Question

I created the following code, but I’m not able to display the information the way I’d like.

I wanted to show off something like

Produto: Nome do produto Valor: 0 Origem: Origem do Produto

But it is appearing [object HTMLInputElement] NaN [object NodeList], someone could help me?

function verificar(){
        var nome = window.document.getElementById('nome')
        var valor = Number(window.document.getElementById('valor'))
        var origem = window.document.getElementsByName('radp')
        var res = window.document.getElementById('res')
    
        res.innerHTML += `Produto: ${nome}`
        res.innerHTML += `Valor: ${valor}`
        res.innerHTML += `Origem: ${origem}`
    
    }

<div>
            <p>Nome do Produto: <input type="text" name="nome" id="nome"></p>
            <p>Valor do Produto: <input type="number" name="valor" id="valor"></p>
            <p>Origem do Produto:
                <input type="radio" name="radp" id="importado" checked>
                <label for="importado">Importado</label>
                <input type="radio" name="radp" id="nacional">
                <label for="nacional">Nacional</label>
            </p>
            
                <input type="button" value="Verificar" onclick="verificar()">
            </p>
           
        </div> 
        <div id="res">
           Preencha os Dados para receber as informações.
        </div>

Answer 1

Missing to catch the .value of the elements. And in the case of radiobuttons you should put a value in each one, type: value="Importado" and value="Nacional" respectively.

And to get the radio value checked more easily, you can use...

var origem = window.document.querySelector('[name="radp"]:checked').value

...instead of using window.document.getElementsByName.

In case you insert the result into the HTML, you can use the string template this way:

res.innerHTML = `Produto: ${nome}
Valor: ${valor}
Origem: ${origem}`

This will generate a space between each item.

Behold:

function verificar(){
    var nome = window.document.getElementById('nome').value
    var valor = Number(window.document.getElementById('valor').value)
    var origem = window.document.querySelector('[name="radp"]:checked').value
    var res = window.document.getElementById('res')

    res.innerHTML = `Produto: ${nome}
    Valor: ${valor}
    Origem: ${origem}`

}

<div>
     <p>Nome do Produto: <input type="text" name="nome" id="nome"></p>
     <p>Valor do Produto: <input type="number" name="valor" id="valor"></p>
     <p>Origem do Produto:
         <input type="radio" name="radp" id="importado" value="Importado" checked>
         <label for="importado">Importado</label>
         <input type="radio" name="radp" id="nacional" value="Nacional">
         <label for="nacional">Nacional</label>
     </p>

         <input type="button" value="Verificar" onclick="verificar()">
     </p>

 </div> 
 <div id="res">
    Preencha os Dados para receber as informações.
 </div>