Event Listeners - Javascript - Tutorial 14
ฝัง
- เผยแพร่เมื่อ 20 ต.ค. 2017
- Source Code - www.giraffeacademy.com/web-dev... This video is one in a series of videos where we'll be looking at programming in JavaScript. The course is designed for new programmers, and will introduce common programming topics using the JavaScript language.
Throughout the course we'll be looking at various topics including variables, arrays, getting user input, loops, conditionals, interacting with the DOM and much more.
You're the best programming teacher on youtube in these beginner tutorials
Most important video in this playlist so far, thank you for this great tutorial.
This was just what I had been trying to find a video. I love your videos!
I'm new to JS, and this video was exactly what I was looking for, in terms of teaching me how to use the listeners on a JS file linked to my HTML file. Thank you for this, definitely subbing!
The cornerstone of front end, thanks for the explanation, you're a good teacher
you explain things so good !! Big compliment from Austria
I learnt html, css and javascript watching u...u are a guru
This was soooo helpful, thank you so much! You explained it very well!
just finished learning Tutorial 14.Thanks to Mike
Love the font style and size too, super easy to read
The best explanatory video on the web.. thank u
Your stuff is great! Thank you!
Thank you for sharing. That was really clear and helpful .
very clear. very concise. thanks
Man you saved my life.. thx so much
From an organization perspective , what do you recommend, to add all event listeners in your html page inline, or have your html and styling seperate, and then have your JavaScript file specifically for adding event listeners and handle user interaction
very easy to understand when mike dane teaches
ty man.very nice instruction
For anyone watching using classes in stead of ID in your html, this is what you have to do for event listeners:
var something = document.getElemtsByClassName("class-name");
for (var temp = 0; temp < something.length; temp++){
let someVar = something[temp];
someVar.addEventListener(THIS WILL WORK)
}
@Grease quala Little harsh, don't you think?
Can I "call" an audio link inside that onclick function so when the button is clicked it makes a sound? Trying to add audio to a counter button.
i enjoyed your tuts. How would you add event listeners to make a box grow, resize turn blue and fade out using 4 diff buttons.I am new to java script
you can do that with css animations
I have got a question... could someone please tell me what 'this' means inboth cases it is used.
example.: this.width
example.: onclick = "handleClick(this)"
8:17
good stuff dude. helped me alot!
This is simply the best explination I have seen for this part of javascript, one quesion: why do you use var image and not let image in index.html ? Thank you very much!
I love you sensei
my function isnt quite working this smoothly. I can only change the box-shadow, not the height.
Thanks!
Was super helpful information, alough the :hover in css would have worked fine too.
Why we events are usee with function to be executed?
So with the image, you do mouse out to set the image back…. But for the button, what event listener would I use to set the button back to its original state 😞 help someone please
best!!!
good video
just 1 suggestion
keep your code zoom out because when you zoom in and start coding half of the code gets cut
is it not working on visual studio code?
Nice
I'm having some trouble with the addEventListener section (around 7 to 9 minutes in). Here's my code, which I've copied from the video several times and tried in both Safari and Chrome, but the image doesn't pop out at all:
function handleClick(element){
element.style = "background-color:blue;"
}
var image = document.getElementById("image");
image.addEventListener("mouseover", function(){
this.style ="box-shadow: 2px 2px 2px grey";
this.width ="110"
});
The "image." and "this." both appear white in my .js document, not red as in Mike's. Any advice on how I can make this work?
check if you remove the "onclick="handleclick(this) " on your image at your HTML page.
Beat Man thx
my image just disappears? I followed along exactly so im not sure what went wrong
incorrect file path but the image in the folder
Clear voice and Zoom most plus points ..
@stillFLiP ahhahahahah
stillFLiP Zoom is really helpful if you’re somewhere waiting, or at work, and you only have your phone.
Please make a video in React
W3 school is very usefull
5:30
1:34, "onclick" is not javascript event. A "click" is. "onclick" is event handler.
This would be a lot easier using CSS
for those who are having trouble with the code in the video for mouseover and out effect can try the code below, its much more simple in my opinion .
function bigImg(x){
x.style.height="150px";
x.style.width="150px";
}
function nrmlImg(x){
x.style.height="100px";
x.style.width="100px";
}
omggg thank you so much!! God bless! Stay safe and healthy!!
This usage of “this ” is just out of nowhere… it is so strange n feels so fluky…
who hurt the person who disliked this video
probably someone that tried to follow along with the video without learning html first.........." He didn't show us how to make the button"...
Alert("your the fucking man;")
man you gotta stop zooming in all the time it gets me confused
Nice