jQuery not targeting selector

Question

using javascript/jquery, why is this working:

var vid = document.getElementById("bgvid");

function stopVideo() {
vid.pause();
}

setTimeout(stopVideo, 2000);

But not this:

var vid = $('#bgvid');

function stopVideo() {
vid.pause();
}

setTimeout(stopVideo, 2000);

conversely, when I try to fade the same video later on, this works:

$('#bgvid').parent().delay(13000).fadeOut(2000);

but this doesn't:

vid.parent().delay(13000).fadeOut(2000);

I thought the var "vid" which is getting the video element by its id would be equivalent to $('#bgvid')...

And also and more importantly, I have an element that appears and fades out after a set time:

var element = $( '#element' );

element.hide().delay(6000).fadeIn(500).delay(6000).fadeOut(500);

and I also would like to make it fade if the user clicks so I have tried this:

$( document ).on('click', function(){
    element.fadeOut(500);
});

but when I click nothing happens and the element does not fade out. No errors on the console. Thank you for your time.

[Possibly relevant](http://stackoverflow.com/questions/4069982/document-getelementbyid-vs-jquery) — Hodrobond, May 16 '17 at 19:49
Ok thanks, and what about the last question. why is the element not fading out on click? — Paul, May 16 '17 at 19:54
You can't run 2 events simultaneously on the same element. Assign your element's parent to the first event. Look at my answer with the code. — Xavier Hendrickx, May 16 '17 at 20:11

score 0 · Answer 1 · edited May 23 '17 at 11:54

As per the answers above, the javascript selector is not equal to the JQuery object. For more in detail look at this previous answer: document.getElementById vs jQuery $()

To get the same DOM object as the javascript selector, you have to select the first object in the array of the JQuery object: vid.get(0)

Concerning the fadeOut question, you can not activate the onClick function on the same ID before your other event is finished.

To get around this, I would suggest putting your element inside a new div, running the show/hide timer on this div and the onClick fadeout on the element.

var element = $( '#element' );

element.hide().parent().delay(6000).fadeIn(500).delay(6000).fadeOut(500);

$( document ).on('click', function(){
    element.fadeOut(500);
});

Good luck.

jQuery not targeting selector

1 Answers1