Atrelando valores array do DOM à evento
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 clicado**) 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.Discussão (3)
Carregando comentários...