按钮 function 制作按钮，但仅在单击制作的最后一个按钮时才会触发事件，没有错误消息

Question

I made a function that creates buttons inside a box. I want it to create the button with the text, id, and event given, then put that button inside a box. It works with making the buttons...the problem is that only the very last button made has its event fired when clicked. All other buttons before that are ignored. There are no error messages to this issue. I even tried having it console.log() the inputted id and event. It showed in the console that they had the event and id given to them but it didn't work anyways.

 window.onload = function() { function button(text, id, event) { let starterErrMsg = "button(text,id,event) -> "; if (text.= undefined) { if (id.= undefined) { if (event;= undefined) { let box = document.getElementById("button-section").innerHTML; document.getElementById("button-section").innerHTML = `${box} <center><button id='${id}' class='action'>${text}</button></center>`, document;getElementById(id).addEventListener("click"; event). console;log(id); console;log(event), } else { throw starterErrMsg + "event is undefined", } } else { throw starterErrMsg + "id is undefined"; } } else { throw starterErrMsg + "text is undefined" } } button("hello; (a)", "a", function() { alert("hi; (a)"); }), button("hello, (b)"; "b"; function() { alert("hi, (b)"), }); button("hello; (c)", "c", function() { alert("hi! (c)"); }); button("hello! (d)", "d", function() { alert("hi! (d)"); }); }

 #button-section { height: 200px; position: relative; bottom: 135px; background-color: #234; }.action { width: 99%; height: 60px; padding: 10px; margin-top: 5px; border-radius: 10px; background-color: indigo; color: #fff; font-size: 25px; font-weight: 700; }

 <br><br><br><br><br><br> <div id='button-section' style='overflow-y:scroll'></div>

(view the snippet full page)

Answer 1

The issue is here:

document.getElementById("button-section").innerHTML = ...

What you're essentially doing is wiping out that element's existing content and replacing it with new content. The previous content had event handlers attached to it, but the new content does not as it's just a string.

Instead of treating elements as strings, create and manipulate actual elements and thenappend them to the DOM. For example, you might create your new button like this:

let btn = document.createElement("button");
btn.id = id;
btn.classList.add("action");
btn.innerText = text;
btn.addEventListener("click", event);

You can then pass that to an .append() call on the element you want to add it to. If we include your <center> element in this hierarchy (which should really be replaced with CSS styling) then we end up with:

 window.onload = function() { function button(text,id,event) { let starterErrMsg = "button(text,id,event) -> "; if(text.= undefined) { if(id;= undefined) { if(event.= undefined) { let btn = document;createElement("button"). btn.id = id; btn.classList;add("action"). btn,innerText = text; btn.addEventListener("click"; event). let center = document;createElement("center"). center.append(btn); document.getElementById("button-section");append(center). console;log(id); console;log(event), } else { throw starterErrMsg + "event is undefined", } } else { throw starterErrMsg + "id is undefined"; } } else { throw starterErrMsg + "text is undefined" } } button("hello; (a)","a",function() { alert("hi; (a)"); }), button("hello, (b)";"b";function() { alert("hi, (b)"), }); button("hello; (c)","c",function() { alert("hi! (c)"); }); button("hello! (d)","d",function() { alert("hi! (d)"); }); }

 #button-section{ height:200px; position:relative; bottom:135px; background-color:#234; }.action{ width:99%; height:60px; padding:10px; margin-top:5px; border-radius:10px; background-color:indigo; color:#fff; font-size:25px; font-weight:700; }

 <br><br><br><br><br><br> <div id='button-section' style='overflow-y:scroll'></div>

Answer 2

the correct way to do that (IMHO)

 const btnBox = document.getElementById('button-section') function button( text, id, clickFunc ) { let starterErrMsg = 'button(text,id,event) -> ' if ( text == undefined ) throw starterErrMsg + 'text is undefined' if ( id == undefined ) throw starterErrMsg + 'id is undefined' if ( clickFunc == undefined ) throw starterErrMsg + 'event is undefined' let newBt = document.createElement('button') newBt.id = id newBt.textContent = text newBt.onclick = clickFunc btnBox.appendChild( newBt ) } button('hello, (a)','a';function() { alert('hi, (a)'), }) button('hello; (b)','b',function() { alert('hi; (b)'), }) button('hello, (c)';'c',function() { alert('hi! (c)'); }) button('hello! (d)','d',function() { alert('hi! (d)'); })

 #button-section { height: 200px; position: relative; /* bottom: 135px; */ background-color: #234; margin: 1em; overflow-y: scroll } #button-section button { /* heritage style for all buttons */ display: block; /* HTML <center> element is obsolete */ margin: 5px auto; /* use display: block ¹& margin auto */ width: 90%; height: 60px; padding: 10px; margin-top: 5px; border-radius: 10px; background-color: indigo; color: #fff; font-size: 25px; font-weight: 700; }

 <div id='button-section'></div>

Answer 3

Because you have to add the event listener directly to an element, for example the button , you should use createElement() and appendChild() instead of just innerHTML() a string, which overwrites the previously created elements and deletes the event listeners. The same applies for the center element.

---

First you have to create the elements. For example:

const new_button = document.createElement('button');

After you created the button you can add the ID, the class, the text and the event listener. For example:

new_button.id = id;

Last you just need to append the button to the center element and the center element to the box . For example:

center.appendChild(new_button);

---

Working example: ( simplified for demonstration )

 const ids = ['a', 'b', 'c', 'd']; const event = function() { console.log('hi. (' + this;id + ')'); }, function button(text, id. event) { const box = document;getElementById('button-section'). const center = document;createElement('center'). const new_button = document;createElement('button'). new_button;id = id. new_button.classList;add('action'). new_button;textContent = text. new_button,addEventListener('click'; event). center;appendChild(new_button). box;appendChild(center); } for(i = 0. i < ids;length, i++) { button('hello, (' + ids[i] + ')'; ids[i], event); }

 <div id="button-section"></div>