Reference multiple (different) Div Id's using document.getElementById

Question

I'm using script editor web part in SharePoint to create a Full screen overlay navigation feature.

I got the code from https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp.

I modified it some because I want to have multiple menus to click that use this feature. I tried to upload a pic, but I don't have 10 reputation points:/ Below is a textual representation. I have a Doctrine menu link and a TTP menu link.

Doctrine
TTP

They work; however, no matter which one I click on, they both show the links associated with TTP. I want to click on Doctrine and see the Doctrine links, and click on TTP to see the TTP links. Two separate nav menus that perform the full screen overlay feature (separately).

I know this subject has been beat to death, but I cannot find anything that satisfies my requirement. Below is how I am referencing getElementById.

Note: I replaced my actual links with dummy links.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    font-family: 'Lato', sans-serif;
}

.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(28,65,104, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #eccb13;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #800000;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
</style>
</head>
<body>

<div id="doctrineNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="#">Car</a>
    <a href="#">Bicycle</a>
    <a href="#">Boat</a>
    <a href="#">Airplane</a>
  </div>

</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9758; Doctrine</span>

<p></p>

<div id="ttpNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="#">Apple</a>
    <a href="#">Orange</a>
    <a href="#">Dog</a>
    <a href="#">Cat</a>
  </div>

</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9758; TTP</span>

<script>
function openNav() {
   document.getElementById("doctrineNav").style.height = "100%";
}

function closeNav() {
   document.getElementById("doctrineNav").style.height = "0%";
}

function openNav() {
   document.getElementById("ttpNav").style.height = "100%";
}

function closeNav() {
   document.getElementById("ttpNav").style.height = "0%";
}

</script>

</body>
</html>

If I change the script around like below, then no matter which one I click on, they both overlay on top of each other. In other words, I can see the TTP links, but also see the Doctrine links behind it.

<script>
function openNav() {
   document.getElementById("doctrineNav").style.height = "100%";
   document.getElementById("ttpNav").style.height = "100%";
}

function closeNav() {
   document.getElementById("doctrineNav").style.height = "0%";
   document.getElementById("ttpNav").style.height = "0%";
}

</script>

Ken Bellows · Accepted Answer · 2018-08-17 19:10:24Z

2

The problem is that you've named both sets of functions the same thing. When you declare openNav the second time to show TTP, it replaces the first instance. An easy solution is to just declare two separate sets of functions, e.g.:

function openDoctrine() {
   document.getElementById("doctrineNav").style.height = "100%";
}

function closeDoctrine() {
   document.getElementById("doctrineNav").style.height = "0%";
}

function openTTP() {
   document.getElementById("ttpNav").style.height = "100%";
}

function closeTTP() {
   document.getElementById("ttpNav").style.height = "0%";
}

and reference them as appropriate, e.g.:

<div id="doctrineNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  ...
</div>
...
<span style="font-size:30px;cursor:pointer" onclick="openDoctrine()">&#9758; Doctrine</span>

In short, you can't reuse names in JavaScript (how should the engine know which function you're referring to?), so use different names more specific to the different task.

answered Aug 17, 2018 at 19:10

Ken Bellows

7,01014 gold badges54 silver badges80 bronze badges

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

3 Comments

Joseph Webber Over a year ago

Beat me to it. I was going to call closeTTP() inside openDoctrine() and closeDoctrine() inside openTTP() though, just to make sure both menus are never shown.

EricS Over a year ago

Outstanding, works like a charm, thank you! At first they would not close, but I changed the closeNav to the same format you used for openDoctrine and openTTP, i.e. closeDoctrine' and closeTTP`.

EricS Over a year ago

By the way, I tried to give you an up vote, but I do not have enough reputation points:/ Cheers!

Ka_ren · Accepted Answer · 2018-08-17 20:24:20Z

0

@Ken Bellows has a great answer. One additional thing I find useful is adding an extra class to the elements you want to select. This class should have no extra CSS, the sole purpose will be to allow you to select multiple divs with one line. Then, use the code from here.

answered Aug 17, 2018 at 20:24

Ka_ren

93 bronze badges

1 Comment

EricS Over a year ago

Thanks Ka_ren, I will check that out.

Collectives™ on Stack Overflow

Reference multiple (different) Div Id's using document.getElementById

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related