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

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>

CodePudding user response：

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>

CodePudding user response：

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 >
  <div>
    <h1>Gone fishing</h1>
  </div>

  <div>
    <h1>Gone fishing</h1>
  </div>
</div>

CodePudding user response：

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  id="DIV1">
  <h1>Gone fishing</h1>
</div>

<div  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";
    }
}