Displaying user input live

gottisama
New Member
2 0 0

Without using React, is it possible to capture user input live in a text field and display it as a h1 or such in a liquid theme?

0 Likes
Bunty
Explorer
114 29 69

Don't need React for that, it can be done with native JS

As an example, this can be your HTML

 

<h1 id="magic">This will change</h1>
<input type="text" onkeypress="doMagic(this.value);"/>

 

And this can be your JS

 

function doMagic(text) {
	var x = document.getElementById("magic");
  x.innerText = text;
}

 

 

See it in action here

https://jsfiddle.net/fiddler2021/b9nf8sq1/7/

 

0 Likes
gottisama
New Member
2 0 0

Cool Thanks, so if I were to incorporate this on my shopify website, where would I put the function?

 

0 Likes