How do I get specific value from an array of values in javascript.

Question

For example I have
<td>one</td>
<td>ten</td>
<td>six</td>
<td>two</td>

How do I only get six without directly using event handlers in each tag

Answer 1

Collect references of the desired elements, then add click event listener to each element

window.onload = () =>
{
document.querySelectorAll("td")
.forEach(col =>
{
col.addEventListener("click", evt =>
{
console.log(event.target.innerHTML);
});
});
}

Answer 2

I presume this is a table row element, so the parent of td is tr tag.
We could add a single eventListener to parent tr tag, the event target would be the targeted child, td element.

<tr>
<td>one</td>
<td>ten</td>
<td>six</td>
<td>two</td>
</tr>

onload = init;

function init() {
var tr = document.querySelector("tr");
tr.addEventListener("click", onRowClick, false);
}

function onRowClick (e) {
console.log(e.target.innerHTML)

}

https://code.sololearn.com/WAJbPBq9wsYk/?ref=app

Answer 3

Something like this ?

alert(document.querySelectorAll("td")[2].innerHTML)

Answer 4

Thanks RIP VIP , your the best 👌

Answer 5

By deleting others🤣🤣

Answer 6

Thanks Sir Isaac Newton, what I meant is the process should be automatic after mouseclick event