Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Como mostrar o valor de mais de um input

Nos exercícios realizados foi utilizado apenas um "input" e, para mostrar o valor utilizou-se a expressão "var input = document.querySelector("input");"

Se eu utilizasse dois input's, um para nome e, outro para o endereço, como utilizaria o método "document.querySelector()"?

2 respostas

Oi Vicente, tudo bem ?

Existem várias formas de se fazer isto e uma delas, é utilizando o id. Ou seja, podemos diferenciá-los dando uma identificação para aquele input. Por exemplo, podemos ter:

<div>
    <input id="segredo"/>
    <button id="botao_segredo">Compare com o número que estou pensando!</button>
<div>
<div>
    <input id="nome"/>
    <button id="botao_nome">Compare com o meu nome</button>
</div>

Observe que agora utilizamos id's para podermos diferenciar um campo input do outro e o mesmo ocorre com o button, damos nomes a eles.

Nisto, para chamá-los com o método document.querySelector() , basta utilizarmos a seguinte sintaxe:

var input_segredo = document.querySelector("#segredo");
var input_nome = document.querySelector("#nome");

Tranquilo até aqui ?

Irei deixar um exemplo completo abaixo para que você possa testar e analisar o código.

<meta charset="UTF-8">

<div>
    <input id="segredo"/>
    <button id="botao_segredo">Compare com o número que estou pensando!</button>
<div>
<div>
    <input id="nome"/>
    <button id="botao_nome">Compare com o meu nome</button>
</div>


<script>
    var segredo = 8;
    var nome = "Nádia";
    var input_segredo = document.querySelector("#segredo");

    var input_nome = document.querySelector("#nome");


    function verifica_numero() {

        if(segredo == input_segredo.value) {
            alert("Parabéns! Você acertou o número secreto");
        }
        else {
            alert("Infelizmente você errou!");
        }

    }

    function verifica_nome() {
        if(nome==input_nome.value){
             alert("Parabéns! Você acertou o meu nome");
        }else {
            alert("Infelizmente você errou!");
        }
    }

    var button = document.querySelector("#botao_segredo");
    var botao_nome = document.querySelector("#botao_nome");

    button.onclick = verifica_numero;
    botao_nome.onclick = verifica_nome;

</script>

Qualquer dúvida estou a disposição. Espero ter ajudado. Bons estudos!!!

solução!

Olá Vicente Tudo bem ?

para ter outro campo input é necessário adicioná-lo em seu html ex:

<input type="text" name=valor do name id=#nome>

<input type="text" name=valor do name id=#endereco>

Você pode acessá-los no JavaScript usando:

document.getElementById('nome');

document.getElementById('endereco')