Main content
Computer programming
Course: Computer programming > Unit 6
Lesson 5: DOM events- Making webpages interactive with events
- Adding an event listener
- Challenge: Cat Clicker
- DOM event types
- Using the event properties
- Challenge: Cat-stache
- Processing forms with events
- Challenge: Mad Libs
- Preventing default behavior of events
- Summary: DOM events
© 2023 Khan AcademyTerms of usePrivacy PolicyCookie Notice
Making webpages interactive with events
Want to join the conversation?
- Even though Jquery is part of JavaScript, wouldn't it be more helpful to use Jquery than to use this type of JS?(6 votes)
- JQuery can simplify this, but it is nice to know how to do it from the original functionality.(24 votes)
- Hi I was just wondering if in this class we would be learning how to create multiple page websites with navigation bars like Khan Academy or most other sites.(7 votes)
- You already know enough to do that. Put each page in a separate HTML file and make links between them. Navigation bars are simply styled
<div>
tags with links in them.(7 votes)
- If you can make games with HTML and javascript, why doesnt anyone here on khanacademy do it?(1 vote)
- Some of my games:
https://www.khanacademy.org/computer-programming/1k-zx-chess/5511065696075776
https://www.khanacademy.org/computer-programming/swat-mcfly/1092685940
https://www.khanacademy.org/computer-programming/kalah/1501023989
https://www.khanacademy.org/computer-programming/towers-of-hanoi-puzzle/1333935232(3 votes)
- How can you make multple pages? Click a button and there is a new page(1 vote)
- You just make many pages and use links to open the others.(2 votes)
- Will there be HTML5 game tutorials soon?(4 votes)
- Some people (like the number one base 12 proponent) have already made games using HTML. It is just much easier to use Processing JS(0 votes)
- How do I make my code check values on an array variable to see if any of them match an inputted value, and do something based on whether or not any of them match the inputted value?(1 vote)
- You could use a for loop:
for (var i = 0, len = array.length; i < len; ++i) {
if (array[i] === value) {
// Do thing
break;
}
}
More simply, though, is:if (array.includes(value) {
// Do something
}(2 votes)
- I want to change the text inside the button, when the button is clicked (this function works) and get the previous text back, when the button is pressed the second time.
let bttn = document.querySelector('button')
if(bttn.textContent = 'Boring button') {
let click = () => {
bttn.textContent = 'Wooow'
}
bttn.addEventListener('click', click)
}
else {
let clickk = () => {
bttn.textContent = 'Boring button'
}
bttn.addEventListener('click', clickk)
}(1 vote) - why does this occur?(1 vote)
- How to we put programs we made on KhanAcademy on our webpages, like that Angry Birds Game?(1 vote)
- Go to one of your projects and click the button that says share. (It is beside the delete and settings buttons)
You can copy the code to imbed the program in a webpage. I would suggest hiding th editor, buttons, etc.(1 vote)
Video transcript
Now you all know how to access
and modify the DOM of your webpages. And you can do that for hours on end.
But why would you do that when you could just start the webpage
off with the HTML that you wanted? Because now you can do all of that
in response to user events. And that is what makes JavaScript
on webpages so powerful. For example, you could
create interactive slideshows by responding when
the user clicks a button. You could create games of all sorts, responding when the user presses keys
or moves their mouse to aim a bird. You can process forms
and validate user input, responding when the
user types in the form. You could create
infinitely-loading galleries, responding whenever
the user scrolls the page. All of that is possible by listening
to events in your webpage. The user will do some action,
like click a button. The browser then fires-- or triggers--
the click event on that button, and your code already has a listener
function set up for that event, so the browser then
calls your listener function, which is some bit of JavaScript
that you want to happen in response. That's the basic gist of how it works, and now I'm going to show you
how to actually code it in your webpage.