title: Link won't open Bootstrap modal
body: <p>I managed to get one of these pesky little things to open on page load in another project, but in this one, the modal won't load when I click the "help" link.</p>
  
  <p>Here is the most important code from my html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang ="en-us"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Bomb Defuser&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;!-- jQuery library --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id = "timeContainer"&gt;
    &lt;span id = "time" style="font-size: 50px"&gt;02:00&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id = "bomb"&gt;
    &lt;img src = "images/bomb.png" alt="bomb"&gt;&lt;/img&gt;
    &lt;a href = "#" style= "float:right;" onclick = "loadModal();"&gt;Help?&lt;/a&gt;
  
    &lt;div id="myModal" class="modal hide fade" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
      &lt;!-- Modal content--&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;Some text in the modal.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the code the function that's supposed to make the modal appear in my js file:</p>
  
  <pre><code>function loadModal(){
    $('#myModal').removeClass("hide").modal('show');
  }
  </code></pre>
  
  <p>EDIT #2:
  I cut down my code to what I thought were the essential bits because this site tells me to do that, but since no one can find the problem here is the full HTML file and full JS file:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang ="en-us"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Bomb Defuser&lt;/title&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
  
  
  
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  
  &lt;!-- jQuery library --&gt;
  
   &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
   &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
   &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  
  
  
  &lt;div id = "timeContainer"&gt; &lt;span id = "time" style="font-size: 50px"&gt;02:00&lt;/span&gt; &lt;/div&gt;
  
  
  
  &lt;div id = "bomb"&gt;
  
  &lt;img src = "images/bomb.png" alt="bomb"&gt;&lt;/img&gt;
  &lt;a href = "#" style= "float:right;" onclick = "loadModal();"&gt;Help?&lt;/a&gt;
  
  &lt;div id="myModal" class="modal hide fade" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
  
      &lt;!-- Modal content--&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;Some text in the modal.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  
  &lt;button style= "color:red;" id = "1" onClick = "cut(this.id)"&gt;Cut the red wire&lt;/button&gt; &lt;button style = "color: blue" id = "2" onClick = "cut(this.id)"&gt;Cut the blue wire&lt;/button&gt; &lt;button style="color:green;" id = "3" onClick = "cut(this.id)"&gt;Cut the green wire&lt;/button&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;span id = "hint"&gt;(Check console for hint)&lt;/span&gt;
  
  &lt;p&gt;&lt;a href ="#" onclick = "startBeep()"&gt; Try again?&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src = "bomb.js" type = "text/javascript"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's the JS file:</p>
  
  <pre><code>function loadModal(){
          $('#myModal').removeClass("hide").modal('show');
      }
  
      // $("#bomb").hide();
  
  
      // var randomRoom = Math.floor(Math.random() * 5) + 1;
  
      var alreadyWon = false;
  
      var boom = new Audio("boom.mp3");
  
      var applause = new Audio("victory.wav");
  
      var beep = new Audio("beep1.wav");
  
      var shouldBeep = true;
  
      function stopBeep(){
          shouldBeep = false;
      }
  
      function startBeep(){
          shouldBeep = true;
      }
  
      boom.volume = 0.4;
      applause.volume = 0.4;
  
      var randomWire = Math.floor(Math.random() * 3) + 1;
  
      console.log(randomWire);
  
      var counter = 120;
  
  
  
      //okay, so how do I do this?  I assign a number value to each button
      //then if random = value of button just pressed, this.id or this.value or whatever,
      //trigger a victory
  
      function detonate(){
          stopBeep();
        //change image src to explosion, alt to explosion, and change size?
        $("img").hide();
  
  
        $("body").css("background", "url('images/explosion.png') no-repeat center center fixed");
        $("body").css("-webkit-background-size", "cover");
        $("body").css("-moz-background-size", "cover");
        $("body").css("-o-background-size", "cover");
        $("body").css("background-size", "cover");
  
    //     $("body").attr({
    //       "background" : "url('images/explosion.png') no-repeat center center fixed",
    //       "-webkit-background-size" : "cover",
    // "-moz-background-size" : "cover",
    // "-o-background-size" : "cover",
    // "background-size" : "cover"
    //     });
  
  
        //hide cut wire buttons
        $("button").hide();
        $("#time").hide();
        $("#timeContainer").hide();
        $("#hint").hide();
  
        $("p").delay(2500).fadeIn();
        boom.play();
      }
  
      function victory() {
          stopBeep();
        $("img").hide();
  
          $("body").css("background", "url('images/victory.png') no-repeat center center fixed");
        $("body").css("-webkit-background-size", "cover");
        $("body").css("-moz-background-size", "cover");
        $("body").css("-o-background-size", "cover");
        $("body").css("background-size", "cover");
  
    //      $("body").attr({
    //       "background" : "url('images/victory.png') no-repeat center center fixed",
    //       "-webkit-background-size" : "cover",
    // "-moz-background-size" : "cover",
    // "-o-background-size" : "cover",
    // "background-size" : "cover"
    //     });
  
        //hide cut wire buttons
        $("button").hide();
        $("#time").hide();
        $("#timeContainer").hide();
        $("#hint").hide();
  
  
        $("p").delay(2500).fadeIn();
  
  
  
        alreadyWon = true;
        applause.play();
  }
  
  $("p").click(function(){
       location.reload();
  });
  
      setTimeout(bombTimer, 1000 * 120);
      setTimeout(time, 1000 * 1);
  
      function timeConverter(t){
        var minutes = Math.floor(t / 60);
      var seconds = t - (minutes * 60);
  
      if (seconds &lt; 10) {
        seconds = "0" + seconds;
      }
  
      if (minutes === 0) {
        minutes = "00";
      }
      else if (minutes &lt; 10) {
        minutes = "0" + minutes;
      }
  
      return minutes + ":" + seconds;
      }
  
      function time(){
        counter--;
  
        if (shouldBeep === true)
          {
              beep.play();
          }
  
  
        counterConverted = timeConverter(counter);
        $("#time").text(counterConverted);
         setTimeout(time, 1000 * 1);
      }
  
      function bombTimer() {
        if (alreadyWon == false)
        {
        alert("Time's up!  Uh-oh!")
  
    detonate();
  }
  
  }
  
  
  
  
      function cut(buttonId){
        if (buttonId == randomWire)
        {
          alert("Great job!");
          victory();
        }
        else
        {
          alert("Wrong wire!  Uh oh!");
          console.log(buttonId);
          //WHY DOES THIS SHOW UP AS UNDEFINED!?
          detonate();
        }
  
  
  
      }
  </code></pre>