My snippet is working on browser console through javascript with all data. but not showing on browser front end

Online Store and Theme Development
1

for example. It only shows the output in console. but initial text is not changing.

<div id="testDiv" style="border: 2px solid red; padding: 20px; margin: 20px 0;">
  Initial Text
</div>

<script>
  // Inline script to test immediately
  console.log('Inline script running');
  const testDiv = document.getElementById('testDiv');
  if (testDiv) {
    testDiv.innerHTML = 'If you see this, JavaScript is working!';
  }
</script>
2

Generally the code looks correct.

  • Do you get any console errors?
  • Could your JS run before the div is rendered? Try using DOMContentLoaded.
  • Does it work if you paste it directly into the console?
  const testDiv = document.getElementById('testDiv');
  if (testDiv) {
    testDiv.innerHTML = 'If you see this, JavaScript is working!';
  }

Does not seem like a Liquid or Shopify related issue by the way.