1

I am trying to simplify this code - is there a way to state/condense the script variable x 0-21 in one line of code instead of each separate line?

<a onclick="myFunction()" id="load_more" class="testimonials_button">View More Testimonials</a

<script>
function myFunction() {
var x = document.getElementsByClassName("single_bottom_testi");
  x[0].style = "display:block";
x[1].style = "display:block";
x[2].style = "display:block";
x[3].style = "display:block";
x[4].style = "display:block";
x[5].style = "display:block";
x[6].style = "display:block";
x[7].style = "display:block";
x[8].style = "display:block";
x[9].style = "display:block";
x[10].style = "display:block";
x[11].style = "display:block";
x[12].style = "display:block";
x[13].style = "display:block";
x[14].style = "display:block";
x[15].style = "display:block";
x[16].style = "display:block";
x[17].style = "display:block";
x[18].style = "display:block";
x[19].style = "display:block";
x[20].style = "display:block";
x[21].style = "display:block";
}
</script>
Jkphillyfan
  • 11
  • 1
  • 1
    The first thing that comes to mind without knowing exactly why you'd want to do this is to use a for loop to set the style `display: block` on each element, however my suggestion would be to use a class and set the property there. Check the [Minimal Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) – Parco Jul 09 '21 at 19:59
  • 1
    Does this answer your question? [How to correctly iterate through getElementsByClassName](https://stackoverflow.com/questions/15843581/how-to-correctly-iterate-through-getelementsbyclassname) – Heretic Monkey Jul 09 '21 at 20:09
  • 1
    also I highly recommend not to use `getElementByClassName` but to use `querySelector` or in your case `querySelectorAll` and `forEach` – tacoshy Jul 09 '21 at 20:15
  • I would toggle a class on one element that is an ancestor of all of those elements and use CSS to show those elements, like `.show_single_bottom_test1 .single_bottom_test1 { display: block; }` and your JavaScript does something like `document.getElementById("ancestor").classList.toggle("show_single_bottom_test1")`. – Heretic Monkey Jul 09 '21 at 20:38

5 Answers5

1

I would recommend creating a class and then adding that class to each of the elements instead of modifying the style directly.

<style>
.displayBlock{
  display: block;
}
</style>
<script>
function myFunction(){
  var x = document.getElementsByClassName("single_bottom_testi");
  for(let i = 0; i < x.length; i++){
    x[i].classList.add("displayBlock"):
  }
}
</script>
Marko Borković
  • 1,884
  • 1
  • 7
  • 22
  • 2
    Definitely the more efficient way to do it. As the op wants all children styled, an even more efficient way would be to add the styling in css `.displayChildrenBlock > * { display: block }` then just add this class to the parent, no loop required. – David Barker Jul 09 '21 at 20:05
1

you need to do loop with new es6 code

document.querySelectorAll(".single_bottom_testi").forEach(item=>item.style.display="block")
Hira Kumar Maharjan
  • 280
  • 1
  • 6
0

1) Use a "for" loop:

myFunction();

function myFunction() {
  var x = document.getElementsByClassName("single_bottom_testi");
  for (var i = 0; i < x.length; i++) {
    x[i].style = "display:block";
  }
}
<button class="single_bottom_testi">Hello</button>
<button class="single_bottom_testi">World</button>
<button class="single_bottom_testi">!!!!!</button>

2) Use "forEach" loop

myFunction();

function myFunction() {
  var x = Array.from(document.getElementsByClassName("single_bottom_testi"));
  x.forEach(e => e.style = "display:block");
}
<button class="single_bottom_testi">Hello</button>
<button class="single_bottom_testi">World</button>
<button class="single_bottom_testi">!!!!!</button>
AlexSp3
  • 2,201
  • 2
  • 7
  • 24
  • 2
    Your first snippet doesn't throw errors only because nothing is calling `myFunction`, but if something did, it would error out with `HTMLCollection` does not have a property `forEach`. – Heretic Monkey Jul 09 '21 at 20:05
  • Thanks for the observation, you are right – AlexSp3 Jul 09 '21 at 20:15
  • In order to make it work using forEach, first have to convert the HTMLCollection with Array.from() – AlexSp3 Jul 09 '21 at 20:18
0

This is somewhat simple. Just make a function to set the style of the element that is passed into it's first argument, and use the forEach function of Array created from the node list.

function myFunction() {
  function setStyle(element) {
    element.style = "display: block";
  }
  var x = document.getElementsByClassName("single_bottom_testi");
  x.forEach(setStyle);
}

Though I would not suggest setting the style property like that. Instead I would use

element.style.display = "none";


<style>
button {
  display: none;
}
</style>

<a onclick="myFunction()" id="load_more" class="testimonials_button">View More Testimonials</a>

<button class="single_bottom_testi">Button</button>
<button class="single_bottom_testi">Button</button>
<button class="single_bottom_testi">Button</button>
<button class="single_bottom_testi">Button</button>
<button class="single_bottom_testi">Button</button>
<button class="single_bottom_testi">Button</button>

<script>
function myFunction() {
  function setStyle(element) {
    element.style.display = "block";
  }
  var x = Array.from(document.getElementsByClassName("single_bottom_testi"));
  x.forEach(setStyle);
}
</script>
ErrorGamer2000
  • 295
  • 3
  • 8
0

This will work in case you want to stick to document.getElementsByClassName:

<a onclick="myFunction()" id="load_more" class="testimonials_button">View More Testimonials</a>
<button class="single_bottom_testi" style="display: none">Button 1</button>
<button class="single_bottom_testi" style="display: none">Button 2</button>
<button class="single_bottom_testi" style="display: none">Button 3</button>

<script>
  function myFunction() {
    Array.from(document.getElementsByClassName("single_bottom_testi")).forEach(el => el.style.display = "block");
  }
</script>
alexnik42
  • 188
  • 10