More efficient way of writing this as part of a JavaScript function?

Question

I am trying to write a JavaScript function that will hide multiple IDs at once. As I will be getting into 50 or so IDs that will need to be hidden for any given function, I don't want to have unnecessary code. I have something like below, but there must be a way to combine all these lines in to one, no?

document.getElementById("aMap").style.display = "none";
document.getElementById("aList").style.display = "none";
document.getElementById("bMap").style.display = "none";
document.getElementById("bList").style.display = "none";
document.getElementById("cMap").style.display = "none";
document.getElementById("cList").style.display = "none";

Ok, thanks everyone. Showing my updated code below. It's not working, as I am sure I am doing something wrong. The goal is to have a function that shows 2 elements that are identified by ID and hide all of the other IDs at the same time:

function zShowHideRest() {
    var zOther = ["aMap", "aList", "bMap", "bList", "cMap", "cList"];
    zOther.forEach.getElementById().style.display = "none";
    document.getElementById("zMap").style.display = "block";
    document.getElementById("zList").style.display = "block";
}

Am I in the ballpark or is what I did way off?

Hey thanks for the quick reply. I am new to Javascript though, and don't know what that means/how to do that? — MATH9
– MATH9, Commented Aug 29, 2019 at 1:03
Possible duplicate of How to loop through buttons and avoid repetition in JavaScript? — Sebastian Simon
– Sebastian Simon, Commented Aug 29, 2019 at 1:03
Not sure it's the same... I want to have these elements be affected by something, not to affect something — MATH9
– MATH9, Commented Aug 29, 2019 at 1:05
It doesn’t matter what specifically you want to do with the elements. You asked how to write this code in a shorter way. The basic way is exactly the same. — Sebastian Simon
– Sebastian Simon, Commented Aug 29, 2019 at 1:10

alberto montalesi · Accepted Answer · 2019-08-29 01:05:40Z

0

Just put all of the IDs in an array and iterate over them using a for of or forEach loop.

const arr = [your list of ids];
for(const a of arr) {
 document.getElementById(a).style.display = "none";
}

const arr = [your list of ids];
arr.forEach((a) => {
 document.getElementById(a).style.display = "none";
})

answered Aug 29, 2019 at 1:05

alberto montalesi

1,03812 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Intervalia · Accepted Answer · 2019-08-29 01:06:40Z

0

Using a loop helps reduce repeated code:

const ids = ["aMap","aList","bMap","bList","cMap","cList"];

ids.forEach(
  function(id) {
    const element = document.getElementById(id);
    if (element) {
      element.style.display = "none";
    }
  }
);

answered Aug 29, 2019 at 1:06

Intervalia

11.1k2 gold badges35 silver badges71 bronze badges

1 Comment

MATH9 Over a year ago

I think this may be something that will help. I am going to try this. Thank you and thank you to all who have replied. I will report back later tonight.

Munkhdelger Tumenbayar · Accepted Answer · 2019-08-29 01:17:05Z

0

document.getElementById("aMap").style.display = "none";
document.getElementById("aList").style.display = "none";
document.getElementById("bMap").style.display = "none";
document.getElementById("bList").style.display = "none";
document.getElementById("cMap").style.display = "none";
document.getElementById("cList").style.display = "none";

// method of array of id REF Sebastian Simon

let arrID = ["aMap", "aList", "bMap", "bList", "cMap", "cList",]

// method 1 for loop

    for (var i = 0; i < arrID.length; i++) {
        document.getElementById(arrID[i]).style.display = "none";
    };

// method 2 for loop

    arrID.forEach((id) => {
     document.getElementById(id).style.display = "none";
    });

    // arrow function not working any of IE

// my suggest

// give your elements same class example:"hide"

document.getElementsByClassName("hide").style.display = "none"; 

quickFix: you either use for loop but using class name makes without array of id but i have array of elements which is has classname hide

let elementsHasHide = document.getElementsByClassName("hide");
for (var i = 0; i < elementsHasHide.length; i++) {
    elementsHasHide[i].style.display="hide"
}

edited Aug 29, 2019 at 1:17

answered Aug 29, 2019 at 1:09

Munkhdelger Tumenbayar

1,90421 silver badges31 bronze badges

2 Comments

MATH9 Over a year ago

this is also helpful

Munkhdelger Tumenbayar Over a year ago

@SebastianSimon oh i see. too Much jquery messes my vanilla script you how jquery works hha sorry i all fix it

vnsharetech Phong Nguyen · Accepted Answer · 2019-08-29 01:30:12Z

-1

You should use Class instead of ID.

var myClasses = document.querySelectorAll('.ids_list'),
        i = 0,
        l = myClasses.length;

    for (i; i < l; i++) {
        myClasses[i].style.display = 'none';
    }

or

var list = document.getElementsByClassName('my-class')
    for (var i = 0; i< list.length; i++){
     list[i].style.display = "none";
    }

html:

<div class="ids_list" id="aMap"></div>
<div class="ids_list" id="aList"></div>
<div class="ids_list" id="bMap"></div>
<div class="ids_list" id="bList"></div>
<div class="ids_list" id="cMap"></div>
<div class="ids_list" id="cList"></div>

Just update js

edited Aug 29, 2019 at 1:30

answered Aug 29, 2019 at 1:18

vnsharetech Phong Nguyen

1016 bronze badges

Collectives™ on Stack Overflow

More efficient way of writing this as part of a JavaScript function?

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related