CODEWITHSUNDEEP
javascripthtml
Max Kolanz
Max Kolanz

Reputation: 1

Can you use getElementByID to display the content of multiple div wrappers

I am using getElementById to toggle the display of a block in html. The block I am toggling is wrapped in a div like so:

<div id="SunMotion">
    <br>
    <p>
      Toggle the switch to run "24HourCycle.py"
    </p>
    <label class="switch">
      <input id="check3" type="hidden">
      <article>
        <button class="program" id="check3" id="script1" onclick="check3()" data-fileName="24HourCycle.py">24 Hour Cycle</button>
      </article>
    </label>
  </div>

This is activated using the button:

 <button class="button button1" onclick="SunMotion()">
            Motion of the Sun
          </button>

The button calls the function in javascript which displays the div using its Id:

document.getElementById("SunMotion").style.display = 'none';
function SunMotion() {
  var x = document.getElementById("SunMotion");
  if (x.style.display === 'none') {
        x.style.display = 'block';
  } else {
    x.style.display = 'none';
    document.getElementById("SunMotion").checked = false;
  }
}

This works fine until I try to do the same thing with a different block. with a new function specific to that button:

<button class="button button1" onclick="SunMotion()">
            Motion of the Sun
</button>
<button class="button button1" onclick="Hologram()">
            Hologram Shapes
</button>
<br>
    <div id="Hologram">
        <br>
        <p>
        Toggle the switch to run the Hologram program
        </p>
        <label class="switch">
        <div class="grid-container">
            <input id="check12" type="hidden">
            <div class="grid-container">
                <div class="item1"><button id="check12" id="grd" id="script1" onclick="check12()" data-fileName="red.py">Red</button></div>
            <input id="check13" type="hidden">   

        </label>
    </div>
<br>
    <div id="SunMotion">
        <p>
        Toggle the switch to run "24HourCycle.py"
        </p>
        <label class="switch">
        <input id="check3" type="hidden">
        <article>
            <button class="program" id="check3" id="script1" onclick="check3()" data-fileName="24HourCycle.py">24 Hour Cycle</button>
        </article>
        </label>
    </div>
<br>

<script>
document.getElementById("Hologram").style.display = 'none';
function Hologram() {
  var x = document.getElementById("Hologram");
  if (x.style.display === 'none') {
        x.style.display = 'inline';
  } else {
    x.style.display = 'none';
    document.getElementById("Hologram").checked = false;
  }
}
document.getElementById("SunMotion").style.display = 'none';
function SunMotion() {
  var x = document.getElementById("SunMotion");
  if (x.style.display === 'none') {
        x.style.display = 'inline';
  } else {
    x.style.display = 'none';
    document.getElementById("SunMotion").checked = false;
  }
}

</script>

Upvotes: 0

Views: 79

Answers (1)

punk73
punk73

Reputation: 378

if you want use that function on another div, you need to use getElementByClass instead. you can check it Here or, if you still want to use id, just send that id as parameter. 

function SunMotion(id) {
var x = document.getElementById(id);
 if (x.style.display === 'none') {
   x.style.display = 'block';
 } else {
   x.style.display = 'none';
   document.getElementById(id).checked = false;
 }
}

and, to call that just paste an Id to that function. 

<button class="button button1" onclick="SunMotion('SunMotion')">
    Motion of the Sun
</button>

Sorry, Typo. you can check my recheck my answer. my Edit is :

onclick="SunMotion('SunMotion')"

Please noted that I changing " by ' in parameter.

Upvotes: 1

Related Questions