modal opens just fine on codepen, but not on shopify

Question

I spent time coding a nice size chart for my Shopify store and got everything where I want it on codepen, but when I dropped all the code into Shopify, it doesn't open, I'm sure it's a javascript issue but I wouldn't even know where to start to look.

any help/guidance would be appreciated on this.

thank you.

---

////// html //////

<div class="product-info__size-chart-line">
  <div class="product-info__size-chart" data-size-chart-handle="size-guide"><button id="myBtn" type="button" class="product-info__size-chart-link">Size Chart</button>
   </div>
</div>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>

    <div id="kotp-size-chart">

    <h2>Men's T-Shirt <br> Size Chart</h2>

      <table class="table kotp-size-chart-table">
        <thead class="">
        </thead>
        <tbody>
          <tr>
            <th rowspan="2">Size</th>
            <th colspan="2">Width</th>
            <th colspan="2">Length</th>
          </tr>
          <tr>
            <td class="incm-header">in</td>
            <td class="incm-header">cm</td>
            <td class="incm-header">in</td>
            <td class="incm-header">cm</td>
          </tr>
          <tr>
            <td class="sizes-header">S</td>
            <td>18</td>
            <td>46</td>
            <td>28</td>
            <td>71</td>
          </tr>
          <tr>
            <td class="sizes-header">m</td>
            <td>20</td>
            <td>51</td>
            <td>29</td>
            <td>74</td>
          </tr>
          <tr>
            <td class="sizes-header">l</td>
            <td>22</td>
            <td>56</td>
            <td>30</td>
            <td>76</td>
          </tr>
          <tr>
            <td class="sizes-header">xl</td>
            <td>24</td>
            <td>61</td>
            <td>31</td>
            <td>79</td>
          </tr>
          <tr>
            <td class="sizes-header">2x</td>
            <td>26</td>
            <td>66</td>
            <td>32</td>
            <td>81</td>
          </tr>
          <tr>
            <td class="sizes-header">3x</td>
            <td>28</td>
            <td>71</td>
            <td>33</td>
            <td>84</td>
          </tr>
          <tr>
            <td class="sizes-header">4x</td>
            <td>30</td>
            <td>76</td>
            <td>34</td>
            <td>86</td>
          </tr>
          <tr>
            <td class="sizes-header">5x</td>
            <td>32</td>
            <td>81</td>
            <td>35</td>
            <td>89</td>
          </tr>

        </tbody>
      </table>

    </div>
    
  </div>

</div>

////// js //////

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Answer 1

The issue with your script tag and it doesn't add the script to the website. You need to check the tag and use the liquid tag script_tag. Read more about script_tag

{{ 'size-chart-modal.js' | asset_url | script_tag }}