无法显示JavaScript弹出窗口

Question

I'm trying to display a popup using JavaScript, however, the div with class="popup" is the only thing that is currently being displayed. Both popup and popup2 should be displayed when the user performs an action. I'm not sure what I'm doing wrong.

HTML:

<div class="popup">
  <span class="popuptext" id="popup"></span>
</div>

<div class="popup2">
    <div class="popup2text" id="popup2"></div>
    <script src="/popup2.js"></script>
</div>

JavaScript:

$(() => {
  $('#enter').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {

The above section of the javascript can be ignored

        var popup = document.getElementById("popup");
        popup.classList.toggle("show");
        var popup2 = document.getElementById("popup2");
        popup2.classList.toggle("show");
      }
    }
  });
});

CSS:

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.popuptext {
  visibility: hidden;
  width: 160px;
  height: 200px;
  background-color: #131313;
  color: #fff;
  opacity: 0.95;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  left: 581px;
  top: 180px;
  margin-left: -80px;
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
}

@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

#popup2 {
  visibility: hidden;
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 50px;
  top: 50px;
  left: 50px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#popup2 .show {
  visibility: visible;
  -webkit-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
}

Answer 1

Your HTML code is invalid.

Change this

<div class="popup">
  <span class="popuptext" id="popup"></span>
</div>

<div class="popup2"></div>
    <div class="popup2text" id="popup2"></div>
    <script src="/popup2.js"></script>
</div>

to this

<div class="popup">
  <span class="popuptext" id="popup"></span>
</div>

<div class="popup2">
    <div class="popup2text" id="popup2"></div>
    <script src="/popup2.js"></script>
</div>

Answer 2

I think you should check your css, As it shouldn't be ".popup .show" and "#popup2 .show", instead it should be "#popup.show" and "#popup2.show" . Then I saw you have given css for ".popup" and not for ".popup2", css for "#popup2" but not for "#popup", similarly you have given css for ".popuptext" and not for ".popup2text".

Also Can you please ellaborate exact behaviour you want on page. Before user enter anything and after user enter something.