I need help with this JavaScript code. for some reason variable "index" always ends up being the last index of the array no matter what link I click.
var linkElements = document.getElementsByTagName('a');
var index;
var origOnClickArr = [];
for (index = 0; index < linkElements.length; ++index) {
origOnClickArr.push(linkElements[index].onclick);
linkElements[index].onclick = function (e) {
if (confirm(message)) {
origOnClickArr[index]();
}
};
}
Try something like this
var linkElements = document.getElementsByTagName('a');
var index;
var origOnClickArr = [];
for (index = 0; index < linkElements.length; ++index) {
(function (index) {
origOnClickArr.push(linkElements[index].onclick);
linkElements[index].onclick = function (e) {
if (confirm(message)) {
origOnClickArr[index]();
}
};
})(index)
}
wrap the code inside the for loop inside a self invoking anonymous function and pass the value of index for each loop.
You can add to the list of event listeners using addEventListener or remove an event listener. Ideally, you would create functions and use javascript to assign the entire function you want to get called + the wrapper function that does the confirmation instead of inline assignment to the onclick event. (http://www.quirksmode.org/js/events_advanced.html).
One way to achieve what you're doing is to use event capturing/bubbling techniques.
Event capture happens from the parent element to the child followed by the event bubbling up from the child to the parent.
You could assign a capture event handler to do the confirmation. If the user confirms, let the event continue propagating. If not, then stop propagation.
Untested but may work:
var message = 'Confirm';
function doConfirm()
{
if (!confirm(message))
{
if (window.event)
{
if (window.event.stopPropagation) // w3c compliant browsers
{
event.stopPropagation();
}
else // Old IE browsers (ie 8 or ie 9 if i remember correctly)
{
event.cancelBubble = true;
}
}
}
}
var arr = document.getElementsByTagName("a");
for (var i = arr.length-; i >= 0; i--)
{
arr[i].addEventListener("click", doConfirm, true); // true indicates capture phase.
}
closures. It's not an easy concept to get your head around, but it explains what the issue is here. There are plenty of question already on SO on the subject