0

I'm having trouble getting this click event listener at the bottom to work from my external file. It works when I call in the HTML, but not in the file. Also the EventListener for the first function works fine. Here is my code.

function returnScore(){
 alert("Your Score is "+ getScore()+"/100");
 }
submit.addEventListener("click",returnScore);



var slideIndex = 1;
showSlides(slideIndex);


var next=document.getElementById("next");
function plusSlides() {
showSlides(slideIndex ++);

}
next.addEventListener("click",plusSlides);

Blockquote Here's some of the HTML, I included the script at the bottom

<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<fieldset><legend><h3>True or False, The American and National League both 
have a DH?</h3></legend>
<label class="container">True<br>
<input type="radio" name="question8" value="A">
<span class="checkmark"></span>
  </label>
<label class="container">False<br>
<input type="radio" name="question8" value="B">
<span class="checkmark"></span>
  </label>
</fieldset>

<div class="mySlides fade">
<div class="numbertext">1 / 3</div>

<fieldset><legend><h3>Who owns the record for most stolen bases in a season? 
</h3></legend>
<label class="container">Tim Raines<br>
<input type="radio" name="question9" value="A">
<span class="checkmark"></span>
  </label>
<label class="container">Rickey Henderson<br>
<input type="radio" name="question9" value="B">
<span class="checkmark"></span>
  </label>
  <label class="container">Lou Brock<br>
<input type="radio" name="question9" value="C">
<span class="checkmark"></span>
  </label>
 <label class="container">Ty Cobb<br>
<input type="radio" name="question9" value="D">
<span class="checkmark"></span>
  </label>
  </fieldset><br></div>




 </div>
 <br>
 </div>
 <div style="text-align:center">
 <button id="next">Next</button> 
 <button id="submit">Submit</button>
 </div>

 <script src="javascript.js">

 </script>
Chris Benzola
  • 27
  • 5

1 Answers1

0

I fixed It, as you did not show your html code, i assume You messed something with markup and those false param in event listener is for preventing event bubbling. More about That here, What is event bubbling and capturing?

    <html>
    <head>
        <title>Test</title>
        <meta charset="utf-8">
    </head>
    <body>

        <button id="submit">Submit</button>
        <button id="next">Next</button>

    </body>
    <script type="text/javascript" src="js.js"></script>
    </html>

var slideIndex = 1;
var submit = document.getElementById('submit');
var next = document.getElementById('next');


function showSlides(index){
    console.log(index);
}

function returnScore(){
    alert("Your Score is "+ getScore()+"/100");
    alert('What ever')
}

showSlides(slideIndex);


function plusSlides() {
    console.log('Whatever')
    showSlides(slideIndex ++);
}



submit.addEventListener("click", returnScore, false);
next.addEventListener("click", plusSlides, false);
Moshiour Rahman
  • 21
  • 4