Why my buttons don't work on the second slide?

JavaScript
1

Hello I would like to know why when I try to click the buttons to see if my answer is right or wrong on the second slide the buttons just wont work like in the first one until I click any of the buttons on the bottom, I have been trying to fix the js file but nothing works, SORRY IF MY LITTLE PROYECT LOOKS TOO SIMPLE OR WRONG I’M VERY NEW ON JS THANKS A LOT.
CODEPEN
HTML

<div class="wrapper">
    <div class="slides slide-one">
        <div class="main-Div">
            <h1>How many states are in the USA? ... </h1>
            <div class="secundary-Div">
                <div class="answer-wrapper">
                    <button class="answers falseAnswer">20 states</button>
                    <button class="answers falseAnswer">23 states</button>
                    <button class="answers correctAnswer">50 states</button>
                </div>
                <div class="answer-wrapper">
                    <button class="answers falseAnswer">20 states</button>
                    <button class="answers falseAnswer">16 states</button>
                    <button class="answers falseAnswer">23 states</button>
                </div>
            </div>
            <div id="myModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content green">
                  <span class="close">&times;</span>
                  <p>Congrats your answer is correct!!!</p>
                </div>     
            </div>
            <div id="myModalFalse" class="modal">
                <!-- Modal content -->
                <div class="modal-content red">
                  <span class="closes">&times;</span>
                  <p>Sorry your answer its wrong :(</p>
                </div>     
            </div>
        </div>
    </div>
    <div class="slides slide-one">
        <div class="main-Div">
            <h1>Who invented javascript</h1>
            <div class="secundary-Div">
                <div class="answer-wrapper">
                    <button class="answers falseAnswer">Mark Zuckerberg</button>
                    <button class="answers falseAnswer">Bill Gates</button>
                    <button class="answers correctAnswer">Brendan Eich</button>
                </div>
                <div class="answer-wrapper">
                    <button class="answers falseAnswer">David Heinemeier Hansson</button>
                    <button class="answers falseAnswer">Guido van Rossum</button>
                    <button class="answers falseAnswer">Steven Paul Jobs</button>
                </div>
            </div>
            <div id="myModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content green">
                  <span class="close">&times;</span>
                  <p>Congrats your answer is correct!!!</p>
                </div>     
            </div>
            <div id="myModalFalse" class="modal">
                <!-- Modal content -->
                <div class="modal-content red">
                  <span class="closes">&times;</span>
                  <p>Sorry your answer its wrong :(</p>
                </div>     
            </div>
        </div>
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

CSS

body {
    font-family: sans-serif;
}
.wrapper {
    text-align: center;
}
.slides {
  margin: 20px;
  display: none;
}
.main-Div {
    display: inline-block;
    margin: auto;
    width: 950px;
    padding: 25px 0;
    border: 1px solid #000;
}
.answer-wrapper {
    display: inline-block;
    width: 300px;

}
.answers {
    background-color: lightgray;
    padding: 10px;
    width: 250px;
    border: 0;
    cursor: pointer;
    margin: 5px 0;
    font-size: 20px;
    font-weight: bold;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
    font-size: 25px;
    font-weight: bold;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
  .green {background-color: greenyellow;}
  .red {background-color: red;}
  
  /* The Close Button */
  .close {
    color: #000;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .modalF {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
    /* The Close Button */
    .closes {
      color:  #000;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

.prev, .next {
  font-size: 50px;
  font-weight: bold;
}

JS



var correctAnswer = document.getElementsByClassName("correctAnswer");
var myModal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
for (var i = 0; i < correctAnswer.length; i++) {
  correctAnswer[i].addEventListener('click', correctA);
}
function correctA() {
  myModal.style.display = "block";
}
span.onclick = function() {
  myModal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == myModal) {
    myModal.style.display = "none";
  }
}

var falseAnswer = document.getElementsByClassName("falseAnswer");
var myModalFalse = document.getElementById("myModalFalse");
var spans = document.getElementsByClassName("closes")[0];
for (var i = 0; i < falseAnswer.length; i++) {
    falseAnswer[i].addEventListener('click', love);
}
function love() {
  myModalFalse.style.display = "block";
}
spans.onclick = function() {
  myModalFalse.style.display = "none";
}
window.addEventListener("click", function(event) {
  if (event.target == myModalFalse) {
    myModalFalse.style.display = "none";
  }
});



var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {showSlides(slideIndex += n);}

function currentSlide(n) {showSlides(slideIndex = n);}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slides");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "block";  
}
2

Hey there,

First, I’d encourage you to never apologize for learning. We’re all here to help each other learn and grow.

One thing that jumps out at me is that you have multiple elements that have the same id. In Javascript it’s important that an id is unique. For example myModal appears twice in your code with the same ID.

Since the modals do the same thing for both slides, its not necessary to define them twice.

Another thing you should try is writing some output to the console. For example:

window.onclick = function(event) {
  if (event.target == myModal) {
    console.log("myModal was clicked");
    myModal.style.display = "none";
  }
}

This will help you step through the code a bit and be notified when an event that you expect takes place.

This indicates that there is not a proper event listener on the buttons on the second slide.

–
In summary, clean up the code a little bit and use console.log() to write output to the console that helps you debug your code.