Can I have a function replaces all of these functions?

Question

Can I use an eventListener and getElementsByClass to create a function that does the same for these buttons instead of having a function for each one? Any explanations will help, thank you!

     <button class = "Button" onclick = "Ginga()"><span id = "Ginga" class = "Movements" >ginga</span></button>
     <button class = "Button" onclick = "Base()"><span id = "Base" class = "Movements" >base</span></button>
     <button class = "Button" onclick = "Role()"><span id = "Role" class = "Movements" >role</span></button>
     <button class = "Button" onclick = "Negativa()"><span id = "Negativa" class = "Movements" >negativa</span></button>
    <div id = "SequenceContainer">
    <div id = "Sequence"></div>
    </div>

function Ginga() {
    var Ginga = document.getElementById('Ginga');
    var GingaCln = Ginga.cloneNode(true);
    Sequence.appendChild(GingaCln);
}
function Base() {
    var Base = document.getElementById('Base');
    var BaseCln = Base.cloneNode(true);
    Sequence.appendChild(BaseCln);
}
function Role() {
    var Role = document.getElementById('Role');
    var RoleCln = Role.cloneNode(true);
    Sequence.appendChild(RoleCln);
}
function Negativa(){
    var Negativa = document.getElementById('Negativa');
    var NegativaCln = Negativa.cloneNode(true);
    Sequence.appendChild(NegativaCln);
}

Use [event delegation](//developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple event listeners — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](//developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](//developer.mozilla.org/en-US/docs/Web/API/Event/target). See [the tag info](/tags/event-delegation/info) and [What is DOM Event delegation?](/q/1687296/4642212). You could use `data-*` attributes to store the target ID. — Sebastian Simon, May 27 '21 at 05:40

Cosmin Staicu · Accepted Answer · 2021-05-27T06:15:34.393

2

Sure you can.

Change the onClick event with:

onclick = "justOne(this)"

(this is used to send to the script the element that the user clicked on)

And replace the javascript with just one function:

function justOne(element) {
  Sequence.appendChild(element.children[0].cloneNode(true));
}

(we select the first child of the clicked element and clone it)

That's it!

LE: I've added another answer with a different approach, using eventListener and getElementsByClassName, as you asked in the question.

edited May 27 '21 at 06:15

answered May 27 '21 at 05:51

Cosmin Staicu

1,514
2
18
21

This worked!!! Thank you brother – Lee Hyunsik May 27 '21 at 14:47

Shalom Alexander · Answer 2 · 2021-05-27T06:19:47.007

0

     <button class = "Button" onclick = "OneForAll()"><span id = "Ginga" class = "Movements" >ginga</span></button>
     <button class = "Button" onclick = "OneForAll()"><span id = "Base" class = "Movements" >base</span></button>
     <button class = "Button" onclick = "OneForAll()"><span id = "Role" class = "Movements" >role</span></button>
     <button class = "Button" onclick = "OneForAll()"><span id = "Negativa" class = "Movements" >negativa</span></button>
    <div id = "SequenceContainer">
    <div id = "Sequence"></div>
    </div>

function OneForAll(event) {
  var element = event.target;
  var elementCln = element.cloneNode(true);
  Sequence.appendChild(elementCln);
}

edited May 27 '21 at 06:19

answered May 27 '21 at 06:01

Shalom Alexander

53
4

2

event.target already IS the element. You don't need to get its id and use getElementById() – lupz May 27 '21 at 06:04
I didn't understand your statement. Pardon. – Shalom Alexander May 27 '21 at 06:06
1

lupz is basically saying `event.target === document.getElementById(event.target.id)`. In other words, you're taking the node and then pulling out the id, so you can traverse the DOM to find the same node you already had. It's a wasted process – Gary May 27 '21 at 06:12
Okay got it. Thanks. – Shalom Alexander May 27 '21 at 06:18

Cosmin Staicu · Answer 3 · 2021-05-27T06:18:38.283

You can also do it with eventListener and getElementsByClass (as you asked) like this:

<button class = "Button"><span id = "Ginga" class = "Movements" >ginga</span> </button>
<button class = "Button"><span id = "Base" class = "Movements" >base</span></button>
<button class = "Button"><span id = "Role" class = "Movements" >role</span></button>
<button class = "Button"><span id = "Negativa" class = "Movements" >negativa</span> </button>
<div id = "SequenceContainer">
<div id = "Sequence"></div>
</div>

<script>
[].forEach.call(document.getElementsByClassName("Button"), function (element) {
    element.addEventListener("click", function () {
        Sequence.appendChild(this.children[0].cloneNode(true));
    });
});
</script>

Please note that I have removed the 'onclick' event inside the <button> element, as it is no longer needed.

This method works like this:

We call the forEach method of the Array class, to iterate over an "array like" element: [].forEach.call()
The list of buttons is obtained using document.getElementsByClassName("Button")
We add an event listener to each button using the element.addEventListener method;

Keep in mind that the script has to be inserted after the button definitions. If you insert the script in the head section, it will not work, because the script runs but the DOM in not yet defined (there are no buttons to attach events to).

Can I have a function replaces all of these functions?

3 Answers3