getElementById() retorna object HTMLCollection

7 de maio de 2018 9 respostas Resolvido

Tony_Martins 7 de maio de 2018

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);
}

9 Respostas

Lucas_Camara 7 de mai. de 2018

Coloque IDs diferentes para os botões.

lype.formiga 7 de mai. de 2018

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.

Tony_Martins 8 de mai. de 2018

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?

lype.formiga 8 de mai. de 2018

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

Tony_Martins 9 de mai. de 2018

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=“<a href="http://java.sun.com/jsp/jstl/core">http://java.sun.com/jsp/jstl/core</a>” %>







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);
             })
         })
    }

Solucao aceita

jrbyte 10 de mai. de 2018

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.

lype.formiga 10 de mai. de 2018

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);
    })
})

Tony_Martins 10 de mai. de 2018 1 like

jrbyte, funcionou perfeitamente, muito obrigado pela ajuda.,

jrbyte 11 de mai. de 2018

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!

Criado 7 de maio de 2018

Ultima resposta 11 de mai. de 2018

Respostas 9

Participantes 4

9 Respostas

Topicos relacionados