Inconsistent Javascript Element Control

Question

var previous = 0;

function displayLaptopInfo(id) {
  if (previous != 0) {
    document.getElementById(previous).style.display = "none";
  }
  document.getElementById(id).style.display = "block";
  previous = id;
}

function closePanel(idp) {
  document.getElementById(idp).style.display = "none";
  alert(idp);
}

.laptop-online {
  background-color: green;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}

.laptop-repair {
  background-color: yellow;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}

.laptop-loan {
  background-color: orange;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}

.laptop-missing {
  background-color: red;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}

.infoPanel {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  height: 80vw;
  background-color: gray;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 40px;
  font-size: 3em;
  text-align: left;
  color: white;
  font-family: 'Montserrat', sans-serif;
}

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class="laptop-online" onclick="displayLaptopInfo('1')">
  1
  <div class="infoPanel" onclick="closePanel('1')" id="1">
    Laptop: 1<br> Serial: BFLDY52<br> Location: In Cart<br> Status: Online<br>
  </div>
</div>
<div class="laptop-repair" onclick="displayLaptopInfo(2)">
  2
  <div class="infoPanel" onclick="closePanel(2)" id="2">
    Laptop: 2<br> Serial: 7MLDY52<br> Location: In Cart<br> Status: Down for Repair<br>
  </div>
</div>
<div class="laptop-loan" onclick="displayLaptopInfo(3)">
  3
  <div class="infoPanel" onclick="closePanel(3)" id="3">
    Laptop: 3<br> Serial: 7VJCY52<br> Location: 2-140<br> Status: Out on Loan<br>
  </div>
</div>

Good evening, I appreciate any help with this. I have been staring at this puzzling issue for a couple hours and I just don't see what I'm missing. I walked away for a few hours and returned, but everything still looks normal to me. Essentially, I cannot get line 79 (document.getElementById(idp).style.display = "none";) to make the DIV disappear. It will disappear in line 72 (document.getElementById(previous).style.display = "none";) but won't do anything on line 79. I've tried changing the ID name, forcing the specific ID, and I verified it is receiving the correct name. I don't understand why the element will not disappear when clicking on itself.

The idea is to click on one of the three main boxes, a larger box with information will appear, then click on that larger box to close it, so you can see the three main boxes again.

Thank you

score 1 · Accepted Answer · answered Mar 02 '19 at 05:19

You need stop event bubbling to parent element, thus use event.stopPropagation(); in the closePanel().

Go through What is event bubbling and capturing?

function closePanel(event, idp) {
  document.getElementById(idp).style.display = "none";
  event.stopPropagation();
}

var previous = 0;

function displayLaptopInfo(id) {
  if (previous != 0) {
    document.getElementById(previous).style.display = "none";
  }
  document.getElementById(id).style.display = "block";
  previous = id;
}

function closePanel(event, idp) {
  document.getElementById(idp).style.display = "none";
  event.stopPropagation();
  alert(idp);
}

.laptop-online {
  background-color: green;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}

.laptop-repair {
  background-color: yellow;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}

.laptop-loan {
  background-color: orange;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}

.laptop-missing {
  background-color: red;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}

.infoPanel {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  height: 80vw;
  background-color: gray;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 40px;
  font-size: 3em;
  text-align: left;
  color: white;
  font-family: 'Montserrat', sans-serif;
}

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class="laptop-online" onclick="displayLaptopInfo('1')">
  1
  <div class="infoPanel" onclick="closePanel(event, '1')" id="1">
    Laptop: 1<br> Serial: BFLDY52<br> Location: In Cart<br> Status: Online<br>
  </div>
</div>
<div class="laptop-repair" onclick="displayLaptopInfo(2)">
  2
  <div class="infoPanel" onclick="closePanel(event, 2)" id="2">
    Laptop: 2<br> Serial: 7MLDY52<br> Location: In Cart<br> Status: Down for Repair<br>
  </div>
</div>
<div class="laptop-loan" onclick="displayLaptopInfo(3)">
  3
  <div class="infoPanel" onclick="closePanel(event, 3)" id="3">
    Laptop: 3<br> Serial: 7VJCY52<br> Location: 2-140<br> Status: Out on Loan<br>
  </div>
</div>

score 0 · Answer 2 · answered Mar 02 '19 at 05:27

Pass the whole element in the closing function using this keyword. And the laptop repair div and the info div are nested in each other. When you click to close the div the displaylaptop function gets invoked. Make the div separate and it will work

var previous = 0;

function displayLaptopInfo(id) {
  if (previous != 0) {
    document.getElementById(previous).style.display = "none";
  }
  document.getElementById(id).setAttribute('style', 'display:block')
  previous = id;
}

function closePanel(idp) {
  idp.setAttribute('style', 'display:none');
  alert(idp.getAttribute('id'))

}

.laptop-online {
  background-color: green;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}

.laptop-repair {
  background-color: yellow;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}

.laptop-loan {
  background-color: orange;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}

.laptop-missing {
  background-color: red;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}

.infoPanel {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  height: 80vw;
  background-color: gray;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 40px;
  font-size: 3em;
  text-align: left;
  color: white;
  font-family: 'Montserrat', sans-serif;
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>


<body>
  <div class="laptop-online" onclick="displayLaptopInfo('1')">
    1
  </div>
  <div class="infoPanel" onclick="closePanel(this)" id="1">
    Laptop: 1<br> Serial: BFLDY52<br> Location: In Cart<br> Status: Online<br>
  </div>

  <div class="laptop-repair" onclick="displayLaptopInfo(2)">
    2</div>
  <div class="infoPanel" onclick="closePanel(this)" id="2">
    Laptop: 2<br> Serial: 7MLDY52<br> Location: In Cart<br> Status: Down for Repair<br>
  </div>

  <div class="laptop-loan" onclick="displayLaptopInfo(3)">
    3</div>
  <div class="infoPanel" onclick="closePanel(this)" id="3">
    Laptop: 3<br> Serial: 7VJCY52<br> Location: 2-140<br> Status: Out on Loan<br></div>


</body>

</html>

Thank you both very much. I didn't know that was how events were handled. — RonJon, Mar 03 '19 at 01:33

Inconsistent Javascript Element Control

2 Answers2