jQuery '$' is always undefined

Question

I am trying to execute a function when a button is clicked, so with jQuery I tried to get my button element, and then execute my function when I click it, and I want to set the display property of a text to "none", and jQuery keep telling me:

cannot change display style of undefined

I have verified that my jQuery is the first script to be loaded on my page, I have read a lot of forms but I can't figure out what I messed up. Can somebody help me?

my HTML:

<h1 id="intro-txt1">
            Welcome to <img src="logo.png" alt="Alcanderia Logo">lcanderia <br>
            <button id="discover-button">&#9654 Discover</button>
        </h1>

my JS:

$('#discover-button').click(function() {
$('#discover-video').style.display = "inline";
$('#discover-video').play();
$('#intro-txt1').style.display = "none";
$(".header-container").style.top = "-15vh";
}

You should always copy the error message exactly. I doubt that the error message is exactly `cannot change display style of undefined` (it is unlikely that `style` is part of the error message). Exact error messages are essential to track down the problem. For the given case it is possible to figure out what the problem is, but in other situations, it might not be the case. And why do you assume that `jQuery '$' is always undefined` the error message you show does not indicate that. — t.niese, Feb 21 '21 at 19:00

score 0 · Answer 1 · answered Feb 21 '21 at 18:50

$ always returns a jQuery object, not an HTMLElement. If you want to use the DOM methods of .style, go through the element instead of the jQuery object:

document.querySelector('#intro-txt1').style.display = 'none';
document.querySelector('.header-container').style.top = "-15vh";

Or use jQuery and go through .hide and .css:

$('#intro-txt1').hide();
$('.header-container').css({ top: '-15vh' });

jQuery '$' is always undefined

1 Answers1