Event Listeners - Javascript - Tutorial 14

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 ธ.ค. 2024

ความคิดเห็น • 66

  • @MrDarkogaucho
    @MrDarkogaucho 3 ปีที่แล้ว +18

    You're the best programming teacher on youtube in these beginner tutorials

  • @vadrif-draco
    @vadrif-draco 5 ปีที่แล้ว +36

    Most important video in this playlist so far, thank you for this great tutorial.

  • @joshuajoshua334
    @joshuajoshua334 2 ปีที่แล้ว +1

    I learnt html, css and javascript watching u...u are a guru

  • @snackmami8371
    @snackmami8371 3 ปีที่แล้ว +6

    you explain things so good !! Big compliment from Austria

  • @RobertGuilman
    @RobertGuilman 3 ปีที่แล้ว

    The cornerstone of front end, thanks for the explanation, you're a good teacher

  • @simbaevans.3301
    @simbaevans.3301 6 หลายเดือนก่อน

    just finished learning Tutorial 14.Thanks to Mike

  • @MrStephen9876
    @MrStephen9876 5 ปีที่แล้ว +7

    This was just what I had been trying to find a video. I love your videos!

  • @elizabeth00653
    @elizabeth00653 5 หลายเดือนก่อน

    Love the font style and size too, super easy to read

  • @jmarq1965
    @jmarq1965 3 ปีที่แล้ว +1

    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!

  • @pasej5
    @pasej5 ปีที่แล้ว

    The best explanatory video on the web.. thank u

  • @amandavanderheyden4938
    @amandavanderheyden4938 5 ปีที่แล้ว +7

    This was soooo helpful, thank you so much! You explained it very well!

  • @HalValla01
    @HalValla01 4 ปีที่แล้ว +2

    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)
    }

    •  4 ปีที่แล้ว

      fuck off nigga, why you need a 'for loop' over here

    • @HalValla01
      @HalValla01 4 ปีที่แล้ว

      @ Little harsh, don't you think?

  • @kartikkrishnan1753
    @kartikkrishnan1753 4 ปีที่แล้ว +7

    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)"

  • @entity5678
    @entity5678 ปีที่แล้ว

    very easy to understand when mike dane teaches

  • @marksiely4747
    @marksiely4747 2 ปีที่แล้ว +1

    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!

  • @prod.kashkari3075
    @prod.kashkari3075 4 ปีที่แล้ว +2

    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

  • @ohad7
    @ohad7 3 ปีที่แล้ว

    Thank you for sharing. That was really clear and helpful .

  • @aquagrenh
    @aquagrenh 4 ปีที่แล้ว +1

    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

    • @freddy7304
      @freddy7304 4 ปีที่แล้ว +2

      you can do that with css animations

  • @rajromil5
    @rajromil5 4 ปีที่แล้ว +2

    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";
    }

    • @Asuuri
      @Asuuri 4 ปีที่แล้ว

      omggg thank you so much!! God bless! Stay safe and healthy!!

  • @orincywhytedesigns
    @orincywhytedesigns 3 ปีที่แล้ว

    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

  • @ryanmattmcdonald
    @ryanmattmcdonald 6 ปีที่แล้ว +1

    Your stuff is great! Thank you!

  • @theasychair148
    @theasychair148 2 ปีที่แล้ว

    Was super helpful information, alough the :hover in css would have worked fine too.

  • @hsmith5723
    @hsmith5723 3 ปีที่แล้ว

    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.

  • @anilui8434
    @anilui8434 5 ปีที่แล้ว +4

    Clear voice and Zoom most plus points ..

    • @byedwardleung
      @byedwardleung 5 ปีที่แล้ว

      @stillFLiP ahhahahahah

    • @JavaScriptJolt
      @JavaScriptJolt 5 ปีที่แล้ว

      stillFLiP Zoom is really helpful if you’re somewhere waiting, or at work, and you only have your phone.

    •  4 ปีที่แล้ว

      @stillFLiP nigga , listen. you follow along, then you don't need whole code.

  • @driverguy5864
    @driverguy5864 6 ปีที่แล้ว +1

    very clear. very concise. thanks

  • @cristinaberceanu
    @cristinaberceanu 5 ปีที่แล้ว

    Man you saved my life.. thx so much

  • @japanwithkids
    @japanwithkids 3 ปีที่แล้ว

    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?

    • @qliu9173
      @qliu9173 2 ปีที่แล้ว +1

      check if you remove the "onclick="handleclick(this) " on your image at your HTML page.

  • @freddy7304
    @freddy7304 4 ปีที่แล้ว

    my function isnt quite working this smoothly. I can only change the box-shadow, not the height.

  • @SeyfadinAbdela
    @SeyfadinAbdela 4 หลายเดือนก่อน

    wow great explanation

  • @color.8467
    @color.8467 4 ปีที่แล้ว

    Why we events are usee with function to be executed?

  • @BG-fo4si
    @BG-fo4si 2 ปีที่แล้ว

    1:34, "onclick" is not javascript event. A "click" is. "onclick" is event handler.

  • @desmondfoo5050
    @desmondfoo5050 3 ปีที่แล้ว

    is it not working on visual studio code?

  • @229axb7
    @229axb7 4 ปีที่แล้ว

    my image just disappears? I followed along exactly so im not sure what went wrong

    • @gery_3585
      @gery_3585 10 หลายเดือนก่อน

      incorrect file path but the image in the folder

  • @hamzaansari7715
    @hamzaansari7715 5 ปีที่แล้ว +2

    good stuff dude. helped me alot!

  • @burhanali9117
    @burhanali9117 4 ปีที่แล้ว +3

    good video
    just 1 suggestion
    keep your code zoom out because when you zoom in and start coding half of the code gets cut

  • @bettyrizzo6167
    @bettyrizzo6167 2 ปีที่แล้ว

    I love you sensei

  • @EtoBARAKUDAvasa
    @EtoBARAKUDAvasa 6 ปีที่แล้ว

    ty man.very nice instruction

  • @zoku5896
    @zoku5896 9 หลายเดือนก่อน

    Thanks!

  • @sheezazainab1903
    @sheezazainab1903 4 ปีที่แล้ว

    Please make a video in React

  • @kom219
    @kom219 11 หลายเดือนก่อน

    Nice

  • @dawooddalvi7704
    @dawooddalvi7704 3 ปีที่แล้ว

    best!!!

  • @raveson1990
    @raveson1990 2 ปีที่แล้ว

    Beat Man thx

  • @faiaz.18
    @faiaz.18 ปีที่แล้ว

    5:30

  • @CoconutwCoco
    @CoconutwCoco 2 ปีที่แล้ว

    This usage of “this ” is just out of nowhere… it is so strange n feels so fluky…

  • @doodlefootball1571
    @doodlefootball1571 3 ปีที่แล้ว

    W3 school is very usefull

  • @jayanthvenavenka7668
    @jayanthvenavenka7668 4 ปีที่แล้ว

    This would be a lot easier using CSS

  • @davidallsopp4030
    @davidallsopp4030 4 ปีที่แล้ว +1

    who hurt the person who disliked this video

    • @freddy7304
      @freddy7304 4 ปีที่แล้ว +1

      probably someone that tried to follow along with the video without learning html first.........." He didn't show us how to make the button"...

  • @__Peter
    @__Peter 4 ปีที่แล้ว

    Alert("your the fucking man;")

  • @truthmatters758
    @truthmatters758 4 ปีที่แล้ว +2

    man you gotta stop zooming in all the time it gets me confused

  • @kom219
    @kom219 11 หลายเดือนก่อน

    Nice