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

Question

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.

Answer 1

task[i].onclick = function ...

the mistake is in the "for" loop
replace all "task" with "task[i]"

Answer 2

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...

Answer 3

try i = task.length-1; i >= 0; i--

Answer 4

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 ).

Answer 5

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

Answer 6

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.