getElementById() retorna object HTMLCollection

Front-end JavaScript
#1

Pessoal. Estou tentando pegar um valor de um button atraves do document.getElementById(), mas nao funciona, retorna “object HTMLButtonElement”, ja tentei varias coisas diferentes, mas nenhuma resolveu, sei que deve ser um erro meu, mas nao fui capaz de identificar onde esta o erro.

<html>

<body>
	<div id="button" onclick="as();">
		<button id="btn" name="${question.answer.answer_a}">${question.answer.answer_a}</button>
		<button id="btn" name="${question.answer.answer_b}">${question.answer.answer_b}</button>
		<button id="btn" name="${question.answer.answer_c}">${question.answer.answer_c}</button>
		<button id="btn" name="${question.answer.answer_d}">${question.answer.answer_d}</button>
	</div>
</body>

</html>

meu JS:

function as() {
	var parametros  =document.getElementById("btn");
	alert(parametros);
}
#2

Coloque IDs diferentes para os botões.

#3

Amigo, quando você esta dando um getElementById() você está selecionando todos os ids com o “name BTN”. por isso ele está te retornando um objeto de HTML de elemento button. Neste caso, a melhor formar de você selecionar um objeto é utilizando o document.querySelectorAll(’.btn’). E trocar esse id por class, pois ele não é único no exemplo acima.

Segue um exemplo:

<div>
        <button class="btn" name="${question.answer.answer_a}">${question.answer.answer_a}</button>
        <button class="btn" name="${question.answer.answer_b}">${question.answer.answer_b}</button>
        <button class="btn" name="${question.answer.answer_c}">${question.answer.answer_c}</button>
        <button class="btn" name="${question.answer.answer_d}">${question.answer.answer_d}</button>
    </div>

    <script>
        var buttons = document.querySelectorAll('.btn');
        
        buttons.forEach(function(button){
            button.addEventListener('click', function(e){
                e.preventDefault();
               alert(this.name);
            })
        })            
    </script>

Espero ter te ajudado.

#4

Muito obrigado por responder lype.formiga. Seu codigo funcionou, mas em partes. Agora quando clico e uma das opcoes, se eh a primeira vez o pop up nao mostra o valor, entao se eu clicar novamente o pop up aparece 2 vezes e assim por diante. Tem uma ideia do que esta causando isso?

#5

Olá Tony, rodei novamente e o teste no meu navegador está ok. Qual navegador você está utilizando?

Consegue compartilhar o código que você está trabalhando?

Abraço

#6

Desculpe pela demora. Olha talvez o seu esta funcionando pq vc esta usando a funcao js no header, no meu esta em um arquivo js separado. Olha ai:
<%@ page language=“java” contentType="text/html; charset=ISO-8859-1"
pageEncoding=“ISO-8859-1”%>
<%@taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>



Game Quiz


</head>
<body>
	<div class="grid">
        <div id="quiz">
            <h1>Quiz</h1>
            <hr style="margin-top: 20px;"></hr>
	   <p id="question" class="q">${question.question}</p>
       

            <div id="button" onclick="myFunction();">
                <button id="btn0" class="value" name="${question.answer.answer_a}">${question.answer.answer_a}</button>
                <button id="btn1" class="value" name="${question.answer.answer_b}">${question.answer.answer_b}</button>
                <button id="btn2" class="value" name="${question.answer.answer_c}">${question.answer.answer_c}</button>
                <button id="btn3" class="value" name="${question.answer.answer_d}">${question.answer.answer_d}</button>
            </div>
	
            <hr style="margin-top: 50px;"></hr>
            <footer>
                <p id="progress">Question x of xx</p>
            </footer>
        </div>
    </div>
</body>
</html>


    function myFunction(){
     var buttons = document.querySelectorAll('.value');
         
         buttons.forEach(function(button){
             button.addEventListener('click',function(e){
                 e.preventDefault();
                alert(this.name);
             })
         })
    }
#7

Olá Tony, já tentou usar a função:

window.onload = function() {

};

como você está usando um arquivo .js separado, coloca seu código nessa função. Depois de carregar todo o conteúdo HTML ele dispara sua função com forEach.

#8

Olá Tony, você pode pedir para o seu JS rodar após o load do html como o jrbyte citou.

Eu fiz um teste mesmo chamando um js externo e funcionou perfeitamente.

Segue o código.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <div>
            <button class="btn" name="${question.answer.answer_a}">${question.answer.answer_a}</button>
            <button class="btn" name="${question.answer.answer_b}">${question.answer.answer_b}</button>
            <button class="btn" name="${question.answer.answer_c}">${question.answer.answer_c}</button>
            <button class="btn" name="${question.answer.answer_d}">${question.answer.answer_d}</button>
        </div>

        <script src="action-buttons.js"></script>
</body>
</html>
</body>
</html>

Codigo do arquivo .js

var buttons = document.querySelectorAll('.btn');
    
buttons.forEach(function(button){
    button.addEventListener('click', function(e){
        e.preventDefault();
        alert(this.name);
    })
})
#9

jrbyte, funcionou perfeitamente, muito obrigado pela ajuda.,

1 curtida
#10

Muito bom, é bom se atentar, caso for usar essa função em um projeto, ela só dispara quando a página inteira, incluindo videos e imagens, carregar totalmente, diferente de usar a função do jQuery:

$(document).ready(function() {/*seu código aqui*/});

que executa depois que o DOM termina de carregar.

Abraços!