Search code examples
shopifyliquidshopify-app

Shopify EventListener is not listening

{% javascript %}
window.addEventListener('resize', console.log('Screen size changed!'));
{% endjavascript %}

This code is supposed to run whenever screen resolution is changed but it only works once the page is loaded, it does not fire when I change resolution.

Solution

  • The reason this happens is because you are calling the function right away and therefore the console.log only outputs once the page is loaded.

    What you would need to do is place this inside of a function like so:

    {% javascript %}
  window.addEventListener('resize', function() {
    console.log('Screen size changed!')
  });
{% endjavascript %}

    That way, whenever the window is resized the function will run and the console.log will be output.

    A further explanation on why this is happening can be found in this answer.