CODEWITHSUNDEEP
javascripthtmlcss
CJ Velasco
CJ Velasco

Reputation: 53

getElementById and addEventListener is not working on my HTML

It's supposed to be a pop-up box on the bottom-right section of the page. There a minimize button on the pop-up. Once clicked, the pop-up would be hidden and the maximize button would turn visible. I need to change the style property, which is visibility in JavaScript. Turning "visible" to "hidden" and vice versa.

let calculateMinimize = document.getElementById("calculate-minimize");
let calculateMaximize = document.getElementById("calculate-maximize");
let calculateContainer = document.getElementById("calculate-container");

calculateMinimize.addEventListener("click", function () {
  calculateContainer.style.visibility = "hidden";
});
#calculate-container {
  position: fixed;
  background-color: #a8baa9;
  width: 30%;
  height: 30vh;
  min-width: 300px;
  min-height: 200px;
  bottom: 10px;
  right: 10px;
  border-radius: 10px;
  box-shadow: 10px 10px 5px rgb(50, 50, 50, 0.7);
  visibility: visible;
}

#calculate-minimize {
  background-color: #fff5cf;
  width: 100%;
  border: none;
  border-radius: 10px 10px 0px 0px;
  height: 30px;
  color: #a8baa9;
  font-size: 20px;
}
#calculate-maximize {
  position: fixed;
  bottom: 0px;
  right: 10px;
  width: 30%;
  height: 30px;
  min-width: 300px;
  border-radius: 10px 10px 0px 0px;
  border-bottom: none;
  box-shadow: 5px -5px 5px rgb(50, 50, 50, 0.7);
  background-color: #beaf87;
  border: none;
  font-size: 20px;
  color: #fff;
  visibility: hidden;
}
<body>
   <div id="calculate-container">
      <button id="calculate-minimize">^</button>
   </div>
   <button id="calculate-maximize">^</button>
</body>

Upvotes: 1

Views: 45

Answers (2)

chrwahl
chrwahl

Reputation: 13163

I cannot see the problem with getElementById and addEventListener, but you should handle both elements each time the user interacts with the buttons.

let calculateMinimize = document.getElementById("calculate-minimize");
let calculateMaximize = document.getElementById("calculate-maximize");
let calculateContainer = document.getElementById("calculate-container");

calculateMinimize.addEventListener("click", function() {
  calculateContainer.style.visibility = "hidden";
  calculateMaximize.style.visibility = "visible";
});

calculateMaximize.addEventListener("click", function() {
  calculateContainer.style.visibility = "visible";
  calculateMaximize.style.visibility = "hidden";
});
#calculate-container {
  position: fixed;
  background-color: #a8baa9;
  width: 30%;
  height: 30vh;
  min-width: 300px;
  min-height: 200px;
  bottom: 10px;
  right: 10px;
  border-radius: 10px;
  box-shadow: 10px 10px 5px rgb(50, 50, 50, 0.7);
  visibility: visible;
}

#calculate-minimize {
  background-color: #fff5cf;
  width: 100%;
  border: none;
  border-radius: 10px 10px 0px 0px;
  height: 30px;
  color: #a8baa9;
  font-size: 20px;
}

#calculate-maximize {
  position: fixed;
  bottom: 0px;
  right: 10px;
  width: 30%;
  height: 30px;
  min-width: 300px;
  border-radius: 10px 10px 0px 0px;
  border-bottom: none;
  box-shadow: 5px -5px 5px rgb(50, 50, 50, 0.7);
  background-color: #beaf87;
  border: none;
  font-size: 20px;
  color: #fff;
  visibility: hidden;
}
<body>
  <div id="calculate-container">
    <button id="calculate-minimize">^</button>
  </div>
  <button id="calculate-maximize">^</button>
</body>

Alternative:

document.addEventListener('DOMContentLoaded', e => {
  let calculateContainer = document.getElementById("calculate-container");
  let calculateContainercontent = calculateContainer.querySelector('div');

  calculateContainer.querySelector('a').addEventListener('click', e => {
    e.preventDefault();
    calculateContainercontent.classList.toggle('hidden');
  });
});
#calculate-container {
  position: fixed;
  background-color: #a8baa9;
  width: 30%;
  bottom: 10px;
  right: 10px;
  border-radius: 10px;
  box-shadow: 10px 10px 5px rgb(50, 50, 50, 0.7);
  display: flex;
  flex-direction: column;
}

#calculate-container>a {
  display: block;
  text-decoration: none;
  text-align: center;
  padding-top: 5px;
  background-color: #fff5cf;
  width: 100%;
  border-radius: 10px 10px 0px 0px;
  color: #a8baa9;
  font-size: 20px;
}

#calculate-container>div {
  min-height: 100px;
}

div.hidden {
  display: none;
}
<body>
  <div id="calculate-container">
    <a href="control">^</a>
    <div>content</div>
  </div>
</body>

Upvotes: 1

DecPK
DecPK

Reputation: 25401

using toggle a class hide with JS(No need to use visibility).

let calculateMinimize = document.getElementById("calculate-minimize");
let calculateMaximize = document.getElementById("calculate-maximize");
let calculateContainer = document.getElementById("calculate-container");

const buttons = [calculateMinimize, calculateMaximize];
buttons.forEach((btn) =>
  btn.addEventListener("click", function() {
    calculateContainer.classList.toggle("hide");
    calculateMaximize.classList.toggle("hide");
  })
);

// or
/*
[calculateMinimize, calculateMaximize].forEach((btn) =>
    btn.addEventListener("click", () => {
        [calculateContainer, calculateMaximize].forEach((c) =>
            c.classList.toggle("hide")
        );
    })
);
*/
#calculate-container {
  position: fixed;
  background-color: #a8baa9;
  width: 30%;
  height: 30vh;
  min-width: 300px;
  min-height: 200px;
  bottom: 10px;
  right: 10px;
  border-radius: 10px;
  box-shadow: 10px 10px 5px rgb(50, 50, 50, 0.7);
}

#calculate-minimize {
  background-color: #fff5cf;
  width: 100%;
  border: none;
  border-radius: 10px 10px 0px 0px;
  height: 30px;
  color: #a8baa9;
  font-size: 20px;
}

#calculate-maximize {
  position: fixed;
  bottom: 0px;
  right: 10px;
  width: 30%;
  height: 30px;
  min-width: 300px;
  border-radius: 10px 10px 0px 0px;
  border-bottom: none;
  box-shadow: 5px -5px 5px rgb(50, 50, 50, 0.7);
  background-color: #beaf87;
  border: none;
  font-size: 20px;
  color: #fff;
}

.hide {
  display: none;
}
<body>
  <div id="calculate-container">
    <button id="calculate-minimize">^</button>
  </div>
  <button id="calculate-maximize" class="hide">^</button>
</body>

Upvotes: 1

Related Questions