Why does this not work?

Hi Brandon,

Thanks once again. I'm pleased to say that just before your answer I had managed to find my way to it.

I got the sense that the e was needed rather than event, even though your explaination has hammered home why.

I also thought there may be an isue with the syntax of the conditional, so I tried alerting the cilcked element so see what it presented itself as, and saw it was all caps. I tried that and it worked!

Also duly noted on the == / === issue.

Thanks again! This is a great feeling!

Hi Luke,

The reason your code would not work as written is because document.getElementsByTagName doesn’t return a single element/node. It returns a list of elements. Even if there’s only one element on the page that fits the string passed into the method, it still returns that element in list form.

So when you then try to call addEventListener on that list of elements, Javascript doesn’t know how to do that.

[<p1>, <p2>, <p3>].addEventListener()

The above statement wouldn’t make sense to the Javascript interpreter (which is kind of what happens to the second statement when you change the code in the first statement from (‘section’)[0] to (‘input’)).

The [0] after the parens says return just the item in the list at index 0.

Now you could for...loop the section variable, and add the event listener to each iteration of the list item within the for loop. But if you want to have the event listener added to the entire section element, then it would be easier and more efficient to test for the target of the click inside the listener, and then change the background color of the targeted element, but only if the targeted element is an input element.

Does that make sense? If not let me know.

Hi,

That makes perfect sense. What a fantastic service you guys offer. Thank you for taking the time.

I had actually made a bit of headway since positing the question. Not least becasue I refreshed the page and realised there was the [0] at the end of the selector. I was trying to backwards engineer it using the existing working code, and must have deleted that bit when doing so which was the main cause of my error!

So all that you've said makes sense. I'm now trying and stuck a little further down the line, if you're able to help again (hopefully I will have solved this before you respond!):

let section = document.getElementsByTagName('section')[0];

section.addEventListener('click', (e) => {
    if(event.target.tagName == 'input') {
  e.target.style.backgroundColor = 'rgb(255, 255, 0)';
       }
});

Many thanks again for your helpful response

HI Brandon.

I could have sworn I replied to this earlier, so excuse my shorter response for to your supportive input.

Long story short it makes complete sense, and I had figured this before your response. I tested it by using alert and using the capitalised response.

Duly noted on the the == / === issue.

Thanks again