Same Javascript code for different ID pairs

Question

I have some JS code below which basically stands for: when the element with x1 ID is hovered make the element with the x1-1 ID visible and then on mouseout return to the default hidden. The problem is that I have a few more ID pairs (x2 & x2-1, x3 & x3-1 etc) that need the same code applied, and I don't want to repeat the code 5 or 6 times. Is there a smart way of wrapping it up in a few lines of code?

document.getElementById("x1").addEventListener("mouseover", mouseOver);
document.getElementById("x1").addEventListener("mouseout", mouseOut);

function mouseOver() {
    document.getElementById("x1-1").style.visibility = "visible";
}

function mouseOut() {
    document.getElementById("x1-1").style.visibility = "hidden";
}

Change `getElementById("x1-1")` to `getElementById(this.id + "-1")`. — marekful, Jul 26 '18 at 15:41

Callat · Answer 1 · 2018-07-26T15:51:32.150

2

Don't use ids, use a class. You should be using ids for exclusive specific elements, if you have a collection of similar elements, classes are better:

 function mouseOver() {
            this.style.visibility = "visible";
 }
function mouseOut() {
            this.style.visibility = "hidden";
}
var classCollection= document.getElementsByClassName("classname");

classCollection.forEach(function(i){
    i.addEventListener("mouseover", mouseOver);
    i.addEventListener("mouseout", mouseOut);
})

Check here for further explanation: JavaScript click event listener on class

edited Jul 26 '18 at 15:51

answered Jul 26 '18 at 15:45

Callat

2,928
5
30
47

How that link the common class with `( x2-1, x3-1 etc)`?!! – Zakaria Acharki Jul 26 '18 at 15:50
The use case is for the same event for all matching sets of elements. Apply a common class to all of those elements and apply the events via that class. In this fashion you don't need the ids and you don't need to replicate the same code to apply the same event set – Callat Jul 26 '18 at 15:53

Zakaria Acharki · Accepted Answer · 2018-07-26T16:44:10.350

0

You could loop through the elements and you need to use this in the functions passed to events, like :

document.querySelectorAll('[id^="x"]').forEach(function(item) {
  item.addEventListener("mouseover", mouseOver);
  item.addEventListener("mouseout", mouseOut);
});

function mouseOver() {
  document.getElementById(this.id + "-1").style.visibility = "visible";
}

function mouseOut() {
  document.getElementById(this.id + "-1").style.visibility = "hidden";
}

<span id="x1">Link X-1</span>
<br>
<span id="x2">Link X-2</span>
<br>
<span id="x3">Link X-3</span>
<br>
<span id="x4">Link X-4</span>

<br><br>

<div id="x1-1">Div X-1</div>
<div id="x2-1">Div X-2</div>
<div id="x3-1">Div X-3</div>
<div id="x4-1">Div X-4</div>

edited Jul 26 '18 at 16:44

answered Jul 26 '18 at 15:46

Zakaria Acharki

66,747
15
75
101

1

Works fine and makes most sense to me your answer (including your earlier suggestion with querySelectorAll('[id^="x"]') – SuavekN Jul 26 '18 at 16:37
Glad I could help.. (I just rolled back to your preferred solution)... HAPPY CODING. – Zakaria Acharki Jul 26 '18 at 16:44

score 0 · Answer 3 · answered Jul 26 '18 at 15:48

Give each element an additional class and then use for loop:

var len = document.getElementsByClassName("the_class"),
    i;

for(i = 1; i <= len; i++) {
    document.getElementById("x" + i).addEventListener("mouseover", function () {
        mouseOver(this.id);
    });
    document.getElementById("x" + i).addEventListener("mouseout", function () {
        mouseOut(this.id);
    });
}

function mouseOver(ID) {
    document.getElementById(ID + "-1").style.visibility = "visible";
}
function mouseOut(ID) {
    document.getElementById(ID + "-1").style.visibility = "hidden";
}

Same Javascript code for different ID pairs

3 Answers3