0

Criei o seguinte código, porém não estou conseguindo exibir as informações da forma que gostaria.

Queria exibir algo como

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

Mas está aparecendo [object HTMLInputElement] NaN [object NodeList], alguém poderia me ajudar?

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>

0

1 Resposta 1

2

Falta pegar os .value dos elementos. E no caso dos radiobuttons você deve colocar um value em cada um, tipo: value="Importado" e value="Nacional" respectivamente.

E para pegar o valor do radio checado mais facilmente, você pode usar...

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

...em vez de usar window.document.getElementsByName.

No caso de inserir o resultado no HTML, você pode usar o template string desta forma:

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

Isso irá gerar um espaço entre cada item.

Veja:

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>

1
  • 1
    Iria responder exatamente isso, mas você foi mais rápido no gatilho 4/12/2019 às 18:12

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .