Javascript Atrelando valores array do DOM à evento

Fernando Riba · 14 de dezembro de 2019

Olá pessoal,
Estou aprendendo JS há alguns meses. Como todo processo de aprendizagem aparecem certas lacunas, dúvidas....
A minha é a seguinte: Estou tendo dificuldade em atrelar elementos do tipo (arrays/listas/vetores) retornados pelos
métodos do DOM e atrelá-los a eventos. Nesse código abaixo eu queria transformar cada dia de um calendário em
um objeto clicável e estou tendo dificuldade em manipular os vetores retornados e atrelá-los a CADA DIA,
alguém pode dar essa luz ??

segue o código:

<script>
		window.onload = function(){
			var msg = document.getElementById("msg");
			
			var el = document.getElementById("mes");
			var elemento = el.getElementsByClassName("dia");
            
			
			
              /*
			  elemento[0].onclick =  function(){
				 elemento[0].style.backgroundColor = "#ccc";
			  }
			  */
			  elemento[1].onclick =  function(){
				 elemento[1].style.backgroundColor = "#ccc";
			  }
			  elemento[2].onclick =  function(){
				 elemento[2].style.backgroundColor = "#ccc";
			  }
			  elemento[3].onclick =  function(){
				 elemento[3].style.backgroundColor = "#ccc";
			  }
			  
			  
		}
	
</script>

</head>

<body>

    <table id="mes">
    	<tr>
    		<td class="dia">1</td><td class="dia">2</td><td class="dia">3</td><td class="dia">4</td><td class="dia">5</td><td class="dia">6</td><td class="dia">7</td>
    	</tr>
    	<tr>
    		<td class="dia">8</td><td class="dia">9</td><td class="dia">10</td><td class="dia">11</td><td class="dia">12</td><td class="dia">13</td><td class="dia">14</td>    		
    	</tr>
    	<tr>
     		<td class="dia">15</td><td class="dia">16</td><td class="dia">17</td><td class="dia">18</td><td class="dia">19</td><td class="dia">20</td><td class="dia">21</td>   		
    	</tr>
     	<tr>
    		<td class="dia">22</td><td class="dia">23</td><td class="dia">24</td><td class="dia">25</td><td class="dia">26</td><td class="dia">27</td><td class="dia">28</td>    		
    	</tr>
     	<tr>
    		<td class="dia">29</td><td class="dia">30</td><td class="dia">31</td>   		
    	</tr>       	   	    	    	
    </table>

</body>
</html>

Já usei função fora do onLoad, já usei loop for mas to quebrando a cabeça aqui.

Eu gostaria que um único botão (O DIA) em uma função conseguisse fazer o trabalho, tipo assim:

  elemento[x].onclick =  function(){
                 elemento[x].style.backgroundColor = "#ccc";
        }

qual a forma correta de fazer isso ????

agradeço a ajuda.

brund321 · 15 de dezembro de 2019

@Fernando Riba Oi Fernando, tudo bem?

Você pode usar um for loop para fazer isso! Aliás uma observação: o que o método getElementsByClassName retorna é parecido com uma array, mas na verdade não é uma array e sim um HTMLCollection, mas isso só vai nos dar problemas se utilizarmos métodos pré-definidos para arrays(não todos, mas a grande maioria sim), o que no caso não irá funcionar por não ser uma array. Mas nós vamos apenas utilizar o método length que é suportado pelo HTMLCollection então não nos trará nenhum problema:

const elemento = el.getElementsByClassName("dia");

function test() {
	console.log('working');
}

for(let x = 0; x < elemento.length; x++) {
	elemento[x].addEventListener('click', test);
}

Veja se você entendeu o que está acontecendo, qualquer coisa é só perguntar!

Abraços.

Fernando Riba · 16 de dezembro de 2019

Olá Brund,

Eu retirei a maior parte do script de window.onload e só deixei a chamada ao DOM
e a chamada a uma função com o retorno do DOM dentro do parâmetro da função,

fiz o loop for para indexar e funcionou...

obrigado, abraço