Listener not hearing me

[phppup]

I have a lot of working code that is essentially doing this:

<div id="mydiv">
  radio buttons 
 </div>
<div id="div2">
  form populates here
 </div>

<script>
  //listen for a radio to be clicked and then display the appropriate form in div2  
 if(radio1){ document.getElementById("div2").innerHTML = blah blah blah   
 if(radio2){  
document.getElementById("div2").innerHTML = blah blah blah   
etc.

Now I want to listen for a change in any input on the form to trigger a response.

However, I am having difficult accessing the form inputs.

document.getElementById("name").addEventListener("click", displayDate);
function displayDate() {
alert('Hurray');
}

//does not work and essentially disables the JavaScript that follows

I managed to gain success with

document.getElementById("div2").addEventListener("click", displayDate);

But this triggers the associated function with any click at any location in the div.

How can I "drill down" to the specific inputs inside the form?

[Barand]

That's the thing about programming - it does what you tell it to do. You told it to respond to clicks inside the div.

Try

document.getElementByTagName("input").addEventListener("click", displayDate);
function displayDate() {
alert('Hurray');
}

 

[phppup]

Same issue.

For some reason, I cannot get a response when I try to access by the inputs or form ID.

It seems pretty straightforward, so I wasn't sure if having JavaScript create the forms was creating an obstacle that I wasn't unaware of.

[Barand]

To add a listener to an element, the element must exist. Make sure you add the listeners after the elements have been created.

[phppup]

I thought of that, but am missing a connection.

The radio selection kicks off a script that populates an empty <div> and displays a form.

At that point, doesn't the form exist?

Shouldn't the forms be accessible?

This portion of scripting is AFTER and below all other code.

[kicken]

If the form is not added until the radio button is changed, the your code adding the event listeners cannot be run until after the radio button is changed either.

Alternatively, you add the event listener higher up in the DOM and check the element that triggered the event.  For example:

document.getElementById("div2").addEventListener("click", displayDate);
function displayDate(e){
  if (e.target.tagName !== 'INPUT'){
    return;
  }
  
  alert('Trigger');
}

 

You callback function is given an event object as it's parameter.  That object has a property called target which is a reference to which DOM element triggered the event.  Check that DOM element to see if it matches your criteria, in this case that it's an <input> element.

 

[phppup]

@kicken okay.

I've got the "Trigger" alert popping up on any text field that I click.

What is this indicating?

Where to from here?

[maxxd]

It sounds like you're getting what you wanted in the OP - you're triggering the function from a mouse event on a form element. What you do now is up to you - we don't know what your goal is.

[phppup]

Yes  @maxxd , I must have had a brain burp.

I went for a walk and then it got me, "Duh, I'm getting what I needed."

Now, i just need to implement it accordingly.

Thanks @Barand and @kicken for your helping hands.