+ 1

How to Apply onclick funtions to several elements of the same class with JS

Hey guys, how can I aplly a onclick function to several elements of the same class or ID's? I want to change the image (src) when I click the element with the class status. For example: HTML: ........ <tr> <td>Reunião de kickoff</td> <td><a href="guides/kickoff.pdf">Link</a></td> <td>Flexy</td> <td><img class="status" src="images/toDo.png"/></td> </tr> <tr> <td>Entrega dos acessos ao painel administrativo</td> <td></td> <td>Flexy</td> <td><img class="status" src="images/toDo.png"/></td> </tr> <tr> <td>Definição do Gateway de pagamentos</td> <td></td> <td>Cliente</td> <td><img class="status" src="images/toDo.png"/></td> </tr> ........ JS: window.onload = function () { var task = document.getElementsByClassName("status"); var statusToDo = "images/toDo.png"; var statusDone = "images/done.png"; for (i = 0; i < task.length; i++) { task.onclick = function () { if(task.src == statusToDo) { ta sk.src = statusDone; } else { task.src = statusToDo; } } } } Can anyone help me? PS: I don't want to put the onclick funtion on the element inside the HTML file, instead I want it to be done by the JS.

21st Dec 2016, 7:56 PM
Rafael Esperidiao Pinho
Rafael Esperidiao Pinho - avatar
6 Respostas
+ 5
task[i].onclick = function ... the mistake is in the "for" loop replace all "task" with "task[i]"
21st Dec 2016, 8:04 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 4
You need to iterate over a list of elements querying with the querySelectorAll() function: var list = document.querySelectorAll(".myclass"); You can use it on a particular element of the DOM tree instead of the document element...
21st Dec 2016, 8:06 PM
visph
visph - avatar
+ 4
try i = task.length-1; i >= 0; i--
21st Dec 2016, 8:19 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 3
You must declare and set your task array in the anonyme function that you set as callback on the onclick event, else the variable doesn't exist anymore when the click occurs ( and even, the scope would probably prohibit access ).
21st Dec 2016, 8:18 PM
visph
visph - avatar
+ 1
I updated it: window.onload = function () { var task = document.getElementsByClassName("status"); var statusToDo = "file:///Volumes/Macintosh%20HD/Sites/Project%201/images/toDo.png"; var statusDone = "file:///Volumes/Macintosh%20HD/Sites/Project%201/images/done.png"; for (i = 0; i < task.length; i++) { task[i].onclick = function () { if(task[i].src == statusToDo) { task[i].src = statusDone; } else { task[i].src = statusToDo; } } } } But it sill doesn't work because when the window is loaded the for is executed a I get's higher than the array length. I tried to use i = 0; i < task.length-1; i++ but then only the last element works. Maybe for is not the best option for this
21st Dec 2016, 8:12 PM
Rafael Esperidiao Pinho
Rafael Esperidiao Pinho - avatar
+ 1
Hey guys, here's the solution: var statusToDo = "file:///Volumes/Macintosh%20HD/Sites/Project%201/images/toDo.png"; var statusDone = "file:///Volumes/Macintosh%20HD/Sites/Project%201/images/done.png"; function changeStatus () { if (this.src == statusToDo) { this.src = statusDone; } else { this.src = statusToDo; } } var statusList = document.getElementsByClassName("status"); window.onload = function () { for (i = 0; i < statusList.length; i++) { statusList[i].onclick = changeStatus; } } Using the this keyword you can reference the element that called the function.
22nd Dec 2016, 12:17 AM
Rafael Esperidiao Pinho
Rafael Esperidiao Pinho - avatar