div with an id wont accept any event handlers JavaScript. No Jquery

Question

Im trying to pause a timed slideshow when you're hovering over a div

    <div id="play_slide" onMouseOver="clearTimeout(playTime)"></div>

If i put onMouseOver="clearTimeout(playTime)" inside an li on the page, it'll pause, so I know my code is correct, it just wont work on the div! Also if i get rid of the id, it will alert when i put an alert function into an event handler

This is the js.

    var playTime;

    function playSlide()
    {
      var slideshow = document.getElementById("play_slide").style;
      var images = new Array("an", "complete", "red", "thirteen");
      indexPlay++;
      if(indexPlay > images.length - 1)
      {
          indexPlay = 0;
      }
      slideshow.backgroundImage = "url('assets/images/play/"+images[indexPlay]+".png')";

      playTime = setTimeout("playSlide()", 2500);
    }

you can see this here: www.nicktaylordesigns.com/work.html

`function playSlide(playTime)` change your function argument bro, what does your playTime mean anyway from evt binder you are sending it as an argument but it seams you are using it as return type at `setTimeout` i dont see its proper use. — user2009750, Dec 07 '13 at 07:31
see `var playTime;` is executed before the your html code, else event result in undefined variable call, see this http://jsfiddle.net/5aNtL/ and check console may you are facing similar to this issue — HRK, Dec 07 '13 at 07:38

score 3 · Answer 1 · answered Dec 07 '13 at 07:39

I would do it like this:

( and no inline script... just <div id="play_slide">Something</div> )

var playTime;
var indexPlay = 0;
var slideElement;
window.onload = function () {
    slideElement = document.getElementById("play_slide");
    slideElement.addEventListener('mouseenter', function () {
        console.log('stop');
        clearTimeout(playTime);
    });
    slideElement.addEventListener('mouseleave', function () {
        console.log('continue');
        playTime = setTimeout(playSlide, 2500);
    });
    playSlide();
}

function playSlide() {
    var slideshow = slideElement.style;
    var images = new Array("an", "complete", "red", "thirteen");
    indexPlay++;
    if (indexPlay > images.length - 1) {
        indexPlay = 0;
    }
    slideshow.backgroundImage = "url('assets/images/play/" + images[indexPlay] + ".png')";
    playTime = setTimeout(playSlide, 2500);
}

Fiddle

This didnt work, heres the site, www.nicktaylordesigns.com/work.html — user3076999, Dec 07 '13 at 08:07
@user3076999, I don't see my code on your site. You have a lot of inline script, I don't recomend that. — Sergio, Dec 07 '13 at 08:12
I added it, but it didnt work, and i laid a div with over the other divs and now its working, probably a crappy way of doing but it worked... and is it bad to have event handlers? — user3076999, Dec 07 '13 at 08:32

Krish R · Answer 2 · 2013-12-07T08:48:52.150

0

Can you try this,

    <div id="play_slide" onmouseover="StopSlide();">Stop</div>

        <script>

            var playTime;
            var indexPlay;
            function playSlide()
            {
              var slideshow = document.getElementById("play_slide").style;
              var images = new Array("an", "complete", "red", "thirteen");
              indexPlay++;
              if(indexPlay > images.length - 1)
              {
                  indexPlay = 0;
              }
              slideshow.backgroundImage = "url('assets/images/play/"+images[indexPlay]+".png')";

              playTime = setTimeout("playSlide()", 2500);
            }

            function StopSlide(){ 
                window.clearTimeout(playTime);

            }

            playSlide();
        </script>

edited Dec 07 '13 at 08:48

answered Dec 07 '13 at 07:42

Krish R

22,583
7
50
59

[what is the difference in call of javascript function onClick=“javascript: function('value') and onClick=”function('value');?](http://stackoverflow.com/a/11824068/2029693) – Givi Dec 07 '13 at 08:02
@Givi What you mean? – Krish R Dec 07 '13 at 08:14
Using `javascript:` prefix in inline event handlers create label named javascript, and should be avoided. – Givi Dec 07 '13 at 08:22

score 0 · Answer 3 · answered Dec 07 '13 at 07:57

This issue is related to the script loading. Your script gets loaded after the DOM is processed so function doesn't get attached to the event.

If you are using jQuery then you can use below code.

$(function () {
    $("#play_slide").mouseover(function(){
    var playTime = 33;
    clearTimeout(playTime);
    });

});

If you don't want to use JQuery then you can do the same thing in JavaScript as below.

window.onload = function(){
    document.getElementById("play_slide").onmouseover = function(){
    var playTime = 33;
    clearTimeout(playTime);
    };
}

score 0 · Answer 4 · answered Dec 07 '13 at 08:48

I got it! the div tag was somehow broken, I coded a div around it and gave it the event handlers and a class. That worked, then i simply changed the class to an id and got rid of the original div. Idk what was going on but it works now. Thanks for your suggestions!

div with an id wont accept any event handlers JavaScript. No Jquery

4 Answers4

Fiddle