How can I change the margin of the element with a variable in JavaScript?

I am quite a beginner and trying to learn JavaScript. I am trying to improve an example for Popup.

I want to adjust the left margin of the popup so I can center the element to the text. I added the CSS for reference but I am trying to do it in JS.

Basically the problem is if I put the code as below it works.

popup.style.marginLeft = "165px";

But if I define it with variable and put it like below, it won’t work.

popup.style.marginLeft = widthPopup;

I don’t know if I am missing anything. I added the all code below for reference.

    function myFunction() {
      var popup = document.getElementById("myPopup");
      popup.classList.toggle("show");

// what I tried to do for the solution
//      let widthPopup = document.createTextNode(popup.clientWidth / -2+"px");
//      console.log(widthPopup);
//      popup.style.marginLeft = widthPopup;
    }

* {
  font-family: "lato";
  font-weight: 300;
  font-size: 17px;
}

/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin: 15em;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 30ch;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  padding: 20px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*# sourceMappingURL=main.css.map */

<div class="popup" onclick="myFunction()">Click me!
    <span class="popuptext" id="myPopup">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, modi magnam tenetur quo labore, nostrum debitis, facere velit nam suscipit error hic? Suscipit ab aspernatur eos rerum, odit quas, voluptatem velit amet quia, nesciunt possimus. Placeat ad suscipit quae ipsum vero voluptatem laboriosam! Labore perspiciatis accusantium reiciendis ex inventore temporibus! Est itaque a adipisci neque mollitia voluptas, tempora praesentium qui? Fuga facilis, ea, aliquam esse nostrum id architecto sit ipsum voluptates vel aspernatur voluptatibus. Molestiae adipisci libero eligendi expedita totam facilis obcaecati officiis voluptatibus magnam quia praesentium exercitationem perspiciatis ipsam impedit suscipit in, corrupti minima enim dolorum vel! Debitis, quaerat.</span>
</div>

Thank you for any help!

Answer

In your example (see below) you tried to set the margin to be equal to a TextNode, which is not a valid value.

// what I tried to do for the solution
//      let widthPopup = document.createTextNode(popup.clientWidth / -2+"px");
//      console.log(widthPopup);
//      popup.style.marginLeft = widthPopup;

You are looking for something like this.

function myFunction() {
      var popup = document.getElementById("myPopup");
      popup.classList.toggle("show");

      // let widthPopup = document.createTextNode(popup.clientWidth / -2+"px");
      let newMargin = popup.clientWidth / -2+"px";
      console.log(widthPopup);
      popup.style.marginLeft = newMargin;
    }

Advertisement

Answer