From the course: JavaScript Essential Training
Unlock the full course today
Join today to access over 24,000 courses taught by industry experts.
Challenge intro: Create an event listener - JavaScript Tutorial
From the course: JavaScript Essential Training
Challenge intro: Create an event listener
(upbeat music) - [Instructor] When a JavaScript application has interactive elements like buttons, or scroll events, or similar features, they're typically triggered using event listeners. In this challenge, you'll add event listeners to a list of form elements to allow the user to update fields in the document. Now the testing platform we're using doesn't have support to display the visible browser. So instead, I've created this sketch to show you what the DOM creates and this is the DOM you'll be working against. So on the webpage there are four pieces of information, name, description, color, and volume. And for each of these items there is the text itself and then there's an input field to update information and an update button. Your challenge is to set up the code so that if someone fills in any one of these fields and clicks on the update button for that field, the text updates as well, but only for that field.…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
-
-
(Locked)
DOM events explained1m 41s
-
(Locked)
Typical DOM events5m 35s
-
(Locked)
Event listeners5m 45s
-
(Locked)
Practice: Experiment with event listeners1m 32s
-
(Locked)
Advanced event listeners and "this"6m 12s
-
(Locked)
Pass arguments through event listeners4m 53s
-
(Locked)
Challenge intro: Create an event listener2m 15s
-
(Locked)
Solution: Create an event listener6m 16s
-
(Locked)
-
-