title: How to open bootstrap modal using a button click
body: <p>I have developed a simple js pig game. You can see it here: <a href="http://creativeartbd.com/demo/game/js-pig-game" rel="nofollow noreferrer">http://creativeartbd.com/demo/game/js-pig-game</a></p>
  
  <p>At first, it will open a Bootstrap Modal box to set a winning score. Now, the game will begin by click on the Roll Dice button. </p>
  
  <p>Well, now if you WIN then you can press the New Game button to re-play the game. Here, I want to open the bootstrap modal again when I click on the New Game button.  For that I have write this code: </p>
  
  <pre><code>document.querySelector(".btn-new-game").addEventListener("click", function () {
      init();     
      document.getElementById("myModal").modal('show');       
  });
  </code></pre>
  
  <p>but it's showing me an error message on console log:</p>
  
  <pre><code>Uncaught TypeError: document.getElementById(...).modal is not a function
  </code></pre>
  
  <p>Maybe this is because of Javascript IIFE. I don't know exactly :(</p>
  
  <p>I have also tried with this code:</p>
  
  <pre><code>document.getElementById("myModal").click();     
  </code></pre>
  
  <p>but no luck :( </p>
  
  <p>My HTML and js code is a bit long that's why I don't put here. You can find it here: <a href="https://jsfiddle.net/r8cga7L5/" rel="nofollow noreferrer">https://jsfiddle.net/r8cga7L5/</a></p>
  
  <p>Thanks. </p>