Why doesn't my javascript work?

[Paton]

I'm trying to display a text someone inputs into a field, and I found the code for it. The code itself works, but tying it into Liquid doesn't. Any idead? Here's the code:

{%- javascript -%}
const input = document.querySelector("input");
const log = document.getElementById("schrift").innerHTML;

input.addEventListener("input", updateValue);

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

[Raj-webdesigner]

Try This Code :-

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

  if (input && log) {
    input.addEventListener("input", function(e) {
      log.textContent = e.target.value;
    });
  }
});

<div class="input-display-container">
  <input type="text" class="text-input" placeholder="Type something...">
  <div id="schrift" class="display-output"></div>
</div>

[Speedysales]

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 <script> 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 <input> 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.

[Paton]

I removed the innerHTML and added the DOM Availability, but I'm still stuck somehow. Is there an ideal place to put the code? The element exists, of course, I checked multiple times.

[Raj-webdesigner]

Can you share your store url with Screen shot

[Paton]

My shop is still in development mode, but here's a screenshot of the html code

[Yuparkoti]

@Paton 

Liquid/JavaScript

{%- javascript -%}
  const input = document.querySelector("input");
  const log = document.getElementById("schrift"); // Fixed this line
  
  input.addEventListener("input", updateValue);
  
  function updateValue(e) {
    log.textContent = e.target.value; // Changed from log to use the element directly
  }
{%- endjavascript -%}

<!-- Add this HTML where you want it to appear -->
<input type="text">
<div id="schrift"></div>

[Paton · Accepted solution]

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

  input.addEventListener("input", updateValue);

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

This worked wonderfully, it was using the first input field it found, not the one I wanted!