Search code examples
javascriptjqueryhtmlcssintel-xdk

Text from HTML input field run through jquery function?


So I have this block of HTML code from a mobile app I'm trying to write (with Intel XDK), see code below. Note, please ignore the div class jargon its from the framework I'm using.

HTML

Basically what I'm trying to do is take input text in a textbox, and on click, take the input text, run it through a jquery function that then prints the input text out in a circle. See the jquery below.

Jquery

The function that warps the text into a circle is from a jquery addon called lettering.js. I have lettering set up properly and it works as it should. However, the text from the text field is useless. I can input text in the text field and click the button, but on click it runs the jquery script on the text I have in the h1 tags.

And I completely understand that's how I currently have it set up. I mainly did that just to demonstrate that lettering.js works. But, I want to know how can I replace the text between the h1 tags with the text from the input field on click, and then have that run through the lettering function. Or better yet, how can I take the text in the input field and have the lettering function run with that text field value? That way it eliminates the need to insert the input text into the h1 tags and then run the function.

Any help would be great. I really don't know much jquery or javascript so I'm probably overlooking something laughably simple.


Solution

  • $(".displayed h1").text($("#tokenMessage").val());
    

    This will but the text from the input field having id tokenMessage and put in in h1 tag which is in the div having class displayed