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!!!