Custom Section Help - Simple CTA button popup

Technical Q&A
1

Im trying to make a simple button which when clicked, shows a popup which will have a hubspot form in it.

However im getting this error when I click the button

Uncaught ReferenceError: openPopup is not defined
at HTMLButtonElement.onclick (contact:1045:80)

The function openPopup is defined… so not sure whats happening

Full code of section is below

<div id="section-cta">
  <div class="container">
    <button type="submit" class="Button Button--primary" onclick="openPopup()">{{ section.settings.link1text }}</button>
    <div class="popup" id="popup">
      <h1>Hello World</h1>
      <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
      <script>
        hbspt.forms.create({
        region: "na1",
        portalId: "23301546",
        formId: "1efeb9a6-4099-4647-8a6f-1c05c5a4fada"
        });
      </script>
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "CTA - Hubspot",
    "settings": [
      {
      "id": "link1text",
      "type": "text",
      "label": "Button 1 Text",
      "default": "Send us a message"
    },
      {
      "id": "link2text",
      "type": "text",
      "label": "Button 2 Text",
      "default": "Book an appointment"
    }
    ],
    "presets": [
      {
      "name": "CTA - Hubspot",
      "category": "Call To Action"
      }
    ]
  }
{% endschema %}

{% stylesheet %}
  .popup {
    width: 400px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 30px;
    visibility: hidden;
  };
  .popup-open {
    visibility: visable;
  }
{% endstylesheet %}

{% javascript %}

  let popup = document.getElementById("popup");
  function openPopup(){
    popup.classList.add("popup-open");
  }

{% endjavascript %}