How to include Javascript in section

Solved
codingenvy
Tourist
4 1 0

Hi, I have a pretty simple section but am unable to get the Javascript to run:

 

<div id="section-soundplayer">
  <script>    
    function hallo(){
      console.log("Hallo");
    }    
  </script>
  <div onclick="hallo()">Click-me</div>
</div>

{% schema %}
  {
    "name": "Soundplayer",
    "settings": [
      {
        "id": "text-box",
        "type": "text",
        "label": "Heading",
        "default": "Title"
      }
    ],
    "presets": [
      {
        "name": "Soundplayer",
        "category": "Soundplayer2"
      }
    ]
  }
{% endschema %}

 

 Output is Uncaught ReferenceError: hallo is not defined

I have tried to place the script tag at different locations in the file, as well as using {% javascript %} -tags. All versions led to the same error.

What am I missing here?

0 Likes
JHKCreate
Shopify Partner
2611 437 637

Hi @codingenvy 

Seems to be working fine on a standard page. Where is this code added?

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
- Learn more about us: jhkcreate.com

0 Likes
codingenvy
Tourist
4 1 0

This is an accepted solution.

Hi @JHKCreate,

thank you for the reply - it pointed me in the right direction. For testing purposes I added the section to the Home Page template (Debut). I assumed that it would be enough to add the section to a page in the template editor. Turns out, I had to save the modified template and then the script was working.

0 Likes
JHKCreate
Shopify Partner
2611 437 637

Fantastic! Don't forget to mark your answer as a solution to let people know you've solved the issue!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
- Learn more about us: jhkcreate.com

0 Likes