Why doesn't my javascript work?

Shopify Discussion
3

The issue is that you’re saving the inner HTML (a string) instead of a reference to the element. In your code you have:

const log = document.getElementById("schrift").innerHTML;

Here, log becomes a string (the current inner HTML of the element with id “schrift”). Later, when you try to update it with:

log.textContent = e.target.value;

it fails because you can’t set a property like textContent on a string.

How to Fix It

Instead, you should store the element itself by removing the .innerHTML when you select it. Change the code to:

const log = document.getElementById("schrift");

Now, log is a reference to the DOM element and you can update its content like this:

log.textContent = e.target.value;

Additional Tips for Liquid and Shopify- Liquid Tags: The {%- javascript -%} tag might be a custom tag provided by your theme or a specific setup. Make sure that this tag is correctly configured to output a block on your page.

  • DOM Availability: Ensure that the elements (the input field and the element with id “schrift”) are present in the DOM before this script runs. If they’re rendered later, consider wrapping your code inside a DOMContentLoaded event listener:

    document.addEventListener("DOMContentLoaded", function() {
  const input = document.querySelector("input");
  const log = document.getElementById("schrift");

  input.addEventListener("input", updateValue);

  function updateValue(e) {
    log.textContent = e.target.value;
  }
});

  • Element Selectors: Confirm that your selectors correctly match the elements in your HTML. For example, ensure there is an element and an element with id=“schrift” on your page.

Making these adjustments should resolve the issue and allow the input text to be displayed correctly.