I am trying to add custom javascript to my Shopify Section, which toggles a pop. I have created a button, which when clicked toggles a function. This function then toggles the specific div to be displayed/hidden. The styling shows up on the page, but the javascript does not seem to work?
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
</style>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</head>
<body>
<button onclick= "myFunction()" >Click it</button>
<div id="myDIV">
This is my DIV element.
</div>
</body>
</html>
{% schema %}
{
"name": "Scan",
"settings": [
{
"id": "link",
"type": "url",
"label": "Button link"
},
{
"id": "linktext",
"type": "text",
"label": "Button text",
"default": "Scan"
}
]
,
"presets": [
{
"name": "Scan",
"category": "Scan"
}
]
}
{% endschema %}