Silent failure adding event listener to toggle?

[KeithP]

Seems super basic, but allergies have reduced my IQ. The background toggle is fine. But, added event listener does nothing. Most likely has to do with passing the ID on click…

// Define functions
function funcChange(clicked_id) {
var el = (clicked_id);
var element = document.getElementById(el);
  element.classList.toggle("bgred");
}
function sayHello() {    
    alert("Hello World!");
}

// Select button element
var btn = document.getElementById("clicked_id"); 

// Assign event listener to button
if(btn){
btn.addEventListener("click", sayHello); 
}

Link to all the pieces …

[skaparate]

Hello!

I may have missed it, but you don’t have any button with an id of ‘clicked_id’ in your HTML, hence it would not work.

You have ‘button_01’, ‘button_02’ and ‘button_03’.

[KeithP]

I’m trying to have independence between each button/ID. So the three IDs you noted work because onclick="funcChange(this.id)" sends the ID to the function. That’s why the background color toggle is working fine. Now if I could get the other function to follow that.

[bbsmooth]

var btn = document.getElementById("clicked_id");

There is no element with the id of “clicked_id” in your HTML.

[KeithP]

OK, I’m going to translate that to mean I need to review syntax for correct use of getElementById()
Give me a little time to make revision and test it …
Thank you @bbsmooth !

[KeithP]

@bbsmooth @skaparate Oh wait that’s not right! What I really need to do is find the proper way to capture clicked_id (again) and assign it to btn
Allergy brain-fog strikes again…

[KeithP]

What a noob I am…
A) My overall intent has been to have two actions from one click. That’s why I tried to add an event listener.
B) The change in background color succeeds because onclick="funcChange(this.id)" in the HTML does send the ID but only to that particular function.
C) I’m now researching how to get the ID copied outside the function, so that it will be available to an event listener that will provide me a second action opportunity (in addition to the background change).
Please let me know if I am on the wrong path?

[bbsmooth]

@KeithP

My overall intent has been to have two actions from one click.

So why not put both actions in the same click handler? Generally you would not want to have two click handlers on the same button.

[KeithP]

I have so far believed that finding a way to move the variable holding the element ID out of the function would be the way to have a second action in the one click handler? All my other attempts have generated errors.

[KeithP]

I’m going to relent and try something like onclick="abc(this.id); def(this.id);"
Once I have a working version, I can later explore addEventListener

Will report progress…

[bbsmooth]

Perhaps I don’t understand what you are trying to do? Why can’t you do the following?

function abc(id) { ... }
function def(id) { ... }
function clickHandler(id) {
  abc(id);
  def(id);
}
onclick="clickHandler(this.id);"

[KeithP]

I got the client request in October, this was delayed for months. The web page will hold many product descriptions with photo, each entry full width. A box floated in one corner of ea prod description will say “More” Here is the spec:
A) Clicking on “More” must:
1-Change “More” to “Less” (toggle)
2-Change “More” background color (toggle)
3-Open a hidden text box with more product info above the existing text box. Above means previously in the DOM.
B) Page must hold as many opened product boxes as page visitor wishes.
C) Mobile friendly.

So, what you just showed me will undoubtedly work well. My problem is that I got sidetracked by the addEventHandler concept. Not trying to ignore you. Ea of the JS gurus here is The Man.

[KeithP]

Progress. This works only on the first of three test buttons. Thereafter, clicking on the second button changes MORE to LESS on the first button. The actions are not constrained to the proper “02, 03” ID.
Here is the broken function, followed by link to example…

var el = (clicked_id);
var element = document.getElementById("mole");
element.classList.toggle('lessmore');
 console.log(element);
console.log(el + " func mor");
}```
[more at replit...](https://replit.com/@OkieFrontend/Button-show-with-event-listener#script.js)

[bbsmooth]

Be sure to have your browser’s JS console open when you click on the buttons. I think you’ll see an error message that you will find helpful. When the message is something like “element is null” it’s usually because you attempted to get an element from the DOM but none were found. I’d check the id you are using on line 10.

[KeithP]

I was using the console in replit, but moved code to a local file.
Well, it’s now constrained to each element, so I may have been looking at a cached version before.
But definitely an error msg …
Thx

[KeithP]

Wow, that was quick: The error is gone. I pulled down the getElementsByClassName solution I used in the second function, and modified it for the third function.
Plus, there was something goofy in the class name for the paragraph that hides and then shows.

Thank you @bbsmooth and @skaparate