Question

I am working with some JavaScript and Ajax functions. I am going to put some code while I explain myself to be more clear.

I have this element: <div id="divTest" onclick="test()">YES</div>

When the user clicks the DIV, the function replaces the "YES" for something like this:

YES <input type="radio" name="testing" value="YES" onclick="test_2(this.value)" checked /> 
NO <input type="radio" name="testing" value="NO" onclick="test_2(this.value)" />

This allows the user to select again the right option. Then I want to replace the radiobuttons with new value, so when the user selects any option, the DIV replaces the "radio" options and displays the value selected (YES OR NO) as it was on the beginning.

At this point everything works perfect.

Here is my problem:

I want the DIV to have the onclick() as the beginning onclick="test()" so I do it from JavaScript giving it the property this way: div.onclick = function() { test();};. The function test() is executed even if the user does not click on the div. It executes both function right away and does not wait until there is a click on it.

Does anyone knows how can I make the function to wait until there is any click on it? Am I giving the onclick property incorrectly?

I hope I made myself clear.

Here are the functions:

function test() {
   var div = document.getElementById("divTest");
   //I DO NOT INCLUDE THE AJAX CODE BUT THE RESPONSE INCLUDE THE RADIO BUTTONS METIONED ABOVE
   div.innerHTML = xml.responseText();
}

function test_2(newValue) {
   div = document.getElementById("newValue");
   div.innerHTML = newValue;
   div.onclick = function() { test(); };
}

Answer 1

Yes, your problem is with div.onclick = here you are actually assigning a click action to your div! Which will execute when your page loads.

What you want is to assign an event listener like so.

div.addEventListener('click' function(){});