Adding interactivity

There is little use in programming unless you allow the user to actually do something — that is, to interact with the website.

That’s why responding to user events such as clicks, mouse overs and key strokes is almost always a starting point of any jQuery code. The best part? It’s dead simple. Here is an example to get you started:

Here is what happens above:

1. The $(“#big-button”) part tells jQuery to select the element with id=”big-button”.
2. The “.click “ tells jQuery we want to use click method and run showSomething function whenever user clicks the #big-button.
3. Function showSomething()  contains the code we actually want to run on each click. In this case, it’s just a standard JavaScript  “alert” method which displays a message to the user.

Try it yourself ➤

Here is another example with slightly more code but fancier result. Can you guess what it does?

Here’s how this script works:

1. $(“#name”) tells jQuery to deal with element id=’name’.
2. .keyup(updateName) calls jQuery keyup method and tells it to run updateName function whenever it detects keystroke on #name element.
3. The first line of updateName() function makes use of jQuery val() method to read the current value of #name input. It will then store that value inside ‘name’ variable.
4. The second line calls jQuery text() method which replaces the text content of #user-name element with the value we stored in our name variable.

Try it yourself ➤