JavaScript Dynamic onClick problem

Question

I am trying to give a button an onclick event when a certain thing on a page changes. I have tried to do it many different ways and none have worked. What am I doing wrong?

Below are what I have tried.

document.getElementById(subDiv).onclick = function() { alert('Error. There is an error on the the page. Please correct that then submit the page'); };


document.getElementById(subDiv).onclick = "alert('Error. There is an error on the the page. Please correct that then submit the page');";


function redErrorAlert()
{
    alert('Error. There is an error on the the page. Please correct that then submit the page');
}
document.getElementById(subDiv).onclick = redErrorAlert;



document.getElementById(subDiv).setAttribute('onclick',redErrorAlert(), false);



document.getElementById(subDiv).setAttribute('onclick','redErrorAlert()', false);

Note: subDiv is a variable containing the id of the element.

Answer 1

You need to wait for the DOM tree to be created before you do queries on it.

Make sure that this all happens within a context that is created after the DOM tree has been built:

window.onload = function() {
    document.getElementById(subDiv).onclick = function() { alert('Error. There is an error on the the page. Please correct that then submit the page'); };
};

Answer 2

document.getElementById() takes a string containing the ID of the element you're trying to find. Assuming you're looking for the element with id 'subDiv', you should be calling document.getElementById('subDiv').

(It's also possible that the variable subDiv in your code is a string containing the ID, but since you didn't mention it I'm assuming that it doesn't.)

EDIT: If you were to go with virstulte's suggestion of using jQuery, you'd attach a function to the document.ready event in order to ensure that the DOM has been built by the time your code runs. Example:

$(document).ready(function() {
    $("#subDiv").click(function() { alert("Test!"); });
});

Answer 3

This sounds like jQuery territory here. Once you learn the ins and outs of jQuery, things like this are a snap to take care of, and you'll find yourself writing a lot less JavaScript.

First, get jQuery from http://jquery.com/

Then put this in your code to bind the event:

$('#idOfElementToBindClickEvent').click(function(){
  alert('Error.');
});

jQuery basically provides a way to manipulate elements using CSS-like selectors.

Answer 4

hello,

try

document.getElementById(subDiv).onclick = alert('Error. There is an error on the the page. Please correct that then submit the page');

or

function redAlert() {
    alert('Error. There is an error on the the page. Please correct that then submit the page');
}

document.getElementById(subDiv).onclick = redAlert();

First case: you need to call the function, and you've assigned a string

Second case: you've assigned a function and you were not calling this function