CODEWITHSUNDEEP
javascript
RonJon
RonJon

Reputation: 13

Inconsistent Javascript Element Control

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

Upvotes: 1

Views: 61

Answers (2)

ellipsis
ellipsis

Reputation: 12152

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>

Upvotes: 0

Satpal
Satpal

Reputation: 133403

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>

Upvotes: 1

Related Questions