Search⌘ K
Home
Courses
The Complete Guide to jQuery

Solution Review: Assigning a Click Event Handler

Explore how to assign a click event handler to a button with jQuery. Understand how to retrieve input from a text box, validate it, display alerts, and clear the input field. This lesson helps you build foundational skills for handling user interactions in web applications using jQuery.

We'll cover the following...

Solution

Explanation

  • In line 2, we assign a click event handler to the button with the id addTask. The button class is already assigned in the web page HTML.

  • In line 3, we extract the current value of the text box with the class textBox using $(".textBox").val(). The text box class is also assigned in the web page HTML.

  • If the text box is not empty, we generate the alert with the task in line 4 and clear out the text box in line 5.

  • If the input box is empty, we generate the alert with the text “Error: Please enter a task before clicking the Add button” in line 8.