Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Introduction to Programming Functions Functions

Valery Kukatov
Valery Kukatov
6,996 Points
Posted by Valery Kukatov
Valery Kukatov
6,996 Points

JavaScript and HTML interaction

Hi, I just re-watched this video, but didn't get the answer I was looking for. I'd like to know how can I have HTML and JavaScript interact with each other, like what code do I put in the HTML to tag specific function to it, and what code do I put in the JavaScript in order for it to get information from specific element in HTML?

Let's say in HTML I have an input set up with a submit button next to it. If the user types in 12+3 or any string really, JavaScript function will take that string and add it up with another input in the HTML, then display it. So how do I make input interact with JavaScript and then calculate/combine inputs and display them back in the webpage(HTML) for the user to read? (Do I need to set up text area as a form for javascript to display answers or is there a way to just have it somehow display answer without having the user being able to mess with it?

Then the other way around, which is kind of similar. Let's say a javascript function is getting information from a smartphone, like time. How do I make that information gathered from the device display on the webpage (HTML) ?

Thank you for any help in advance.

4 Answers

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

You probably want to check out the course "Intro to jQuery" that Treehouse just put out. As far as what code you put in the HTML, you don't really need to do anything different there. You can use javascript to select HTML elements by class, id, tag, etc., similar to how you would target specific elements using CSS.

Valery Kukatov
Valery Kukatov
6,996 Points
Valery Kukatov
Valery Kukatov
6,996 Points

Thanks man. Makes sense now. The jQuery ($) is fairly simple, yes, but unfortunately what I need to accomplish doesn't work with jQuery from what I understand.

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Here is a simple example for getting the value of an input and then outputting it back to the HTML on keyup codepen Let me know if you want a more detailed demo with some Math :)

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Valery, I was halfway through a response for you but my browser went back a page and lost it and being tired, this will be a bit shorter (I can follow up more tomorrow if you need it). I was going to write some examples but I think it would be better for you to check out the rest of the jQuery course because it covers functions like .val() which returns a string, events like the keyup() event, and more. Also I highly recommend checking out the free course Try jQuery over at code school. It is about 3 hours long and highly interactive. Between these two courses, you will be able to get a good handle on jQuery. I just don't want to confuse you with examples because there is a lot involved with what you would like to do. Also use the jQuery API Documentation to find functions that you need for certain projects. You will find functions like the $.now() function which returns the current time. Hope this helps!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

jqapi.com is a more searchable version of the jQuery API

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Thanks James, I will have to try this out next time I need to find a function! Sometimes I just google jQuery and the function I need so that it comes up with the function's API page in the top results, but for actually finding new methods your link might work better.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

You can absolutely do this using javascript/jQuery, which is probably the easiest way to do it as far as I can tell. There is a .val() function in jQuery that allows you to get the value of a form element. You can store the values from your inputs as variables and then do some string conversions to calculate the answers.

Read up: http://api.jquery.com/val/