How to get one script to change Z-Index on two boxes?

Question

This is my first website project; I want the one <button> to change the z-index on two boxes. Two buttons would be no problem, but I want the script to do two things in one action. I couldn´t find any information about this subject online.

 function myFunction() { document.getElementById("DIV1").style.zIndex = "-1"; }

 #DIV1 { position: absolute; width: 200px; height: 100px; background-color: lightblue; border: 1px solid black; } #DIV2 { position: relative; top: 70px; left: 30px; width: 200px; height: 100px; background-color: coral; border: 1px solid black; }

 <button onclick="myFunction()">Enter</button> <div id="DIV1"> <h1>Gone fishing</h1> </div> <div id="DIV2"> <h1>Gone fishing</h1> </div>

Answer 1

 function myFunction() { ['DIV1', 'DIV2'].map(elementId => { const element = document.getElementById(elementId); element.classList.add('class'); }); }

 #DIV1 { position: absolute; width: 200px; height: 100px; background-color: lightblue; border: 1px solid black; } #DIV2 { position: relative; top: 70px; left: 30px; width: 200px; height: 100px; background-color: coral; border: 1px solid black; }.class { z-index: -1; }

 <button onclick="myFunction()">Enter</button> <div id="DIV1"> <h1>Gone fishing</h1> </div> <div id="DIV2"> <h1>Gone fishing</h1> </div>

Answer 2

The most simple toggle approach was to group the two elements as children of a single parent-element. This element then features an additional class-name which will be toggled via parentNode.classList.toggle . With this parent-element's toggle-specific class-name one provides an additional rule which will prefer one child element over the other, whereas the default is the natural layering of the child elements.

 function toggleLayers() { document.querySelector('.toggle-box').classList.toggle('toggle-on'); } document.querySelector('button').addEventListener('click', toggleLayers);

 .toggle-box { position: relative; }.toggle-box >:first-child { position: absolute; width: 200px; height: 100px; background-color: lightblue; border: 1px solid black; }.toggle-box >:last-child { position: relative; top: 70px; left: 30px; width: 200px; height: 100px; background-color: coral; border: 1px solid black; }.toggle-box.toggle-on >:last-child { z-index: -1; } button { margin-bottom: 5px; } body { margin: 0; }

 <button>toggle layers</button> <div class="toggle-box"> <div> <h1>Gone fishing</h1> </div> <div> <h1>Gone fishing</h1> </div> </div>

Answer 3

Add a class to your elements and select by class instead. As mentioned here Using querySelectorAll to change the style property of multiple elements

<button onclick="myFunction()">Enter</button>

<div class="heading" id="DIV1">
  <h1>Gone fishing</h1>
</div>

<div class="heading" id="DIV2">
  <h1>Gone fishing</h1>
</div>

function myFunction() {

    var elems = document.querySelectorAll('.heading');
    var index = 0, length = elems.length;
    for ( ; index < length; index++) {
        elems[index].style.zIndex = "-1";
    }
}