variable assignment not working

Question

I do not understand why my variable assignment: var mn = $("nav"); is not working in this piece of code:

var mn = $("nav");
var randomNum = 23;

$(window).scroll(function() {
  if( $(this).scrollTop() > 400 ) {
    $("nav").addClass("main-nav-scroll");
    alert(randomNum);
  } else {
    mn.removeClass("main-nav-scroll");
  }
});

When I manually write it out in $("nav").addClass(...); it works perfectly. I thought the problem was maybe the scope of the variable so I added the randomNum variable to print out and it does so just fine. I'm really stumped. It took me forever to find this simple error So I'd like to understand for next time. Thanks.

@John: Most likely it’s a [`nav` _element_](https://www.w3.org/TR/html5/sections.html#the-nav-element) … — CBroe, Apr 08 '16 at 22:30
What do you see in the console if you add `console.log(mn)` to the `scroll` event handler? — Rory McCrossan, Apr 08 '16 at 22:34
Possibly a duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/q/14028959/218196) — Felix Kling, Apr 08 '16 at 22:34
@Barmar I think this is the problem. I'm super new to to this and so I don't fully understand the purpose of $(document).ready() nor do I know exactly how to implement it. But I'm going to figure it out. Thanks! — Vindictive, Apr 09 '16 at 21:09

arc.slate .0 · Answer 1 · 2016-04-08T23:07:39.787

0

Your problem is likely nav. It is a dom element just like <p>. So when you try to select it your query is to general.

Give nav and ID and select it that way.

For example

HTML

<nav id "foob"></nav>

JS

var mn = $("#foob");

In Addition

Also, put a console.log('scroll event fired') in your event handler so that you can verify that the event is actually firing.

edited Apr 08 '16 at 23:07

answered Apr 08 '16 at 22:38

arc.slate .0

428
3
8

4

well based on what the question said, if that's the case then writing $("nav").addClass(...); manually wouldn't work either. – Nelson Teixeira Apr 08 '16 at 22:48

score 0 · Answer 2 · edited Apr 09 '16 at 00:07

This works:

<script type="text/javascript">
  jQuery(document).ready(function ($selimatac) {

    // öncelikle divi bir gizleyelim
    $selimatac("#yukari").hide();

    //scroll eğer 100 değerinin üstünde ise divi görünür yapacak, değilse gizleyecektir
    $selimatac(function () {

        $selimatac(window).scroll(function () {
            if ($selimatac(this).scrollTop() > 100) {
                $selimatac('#yukari').fadeIn();
            } else {
                $selimatac('#yukari').fadeOut();
            }
        });

        // butona tıklayınca sayfa en üste çıkması için
        $selimatac('div a').click(function () {
            $selimatac('window,html,body').animate({
                scrollTop: 0
            }, 1000);
            return false;
        });
    });
});
</script>

Look at http://selimatac.net/jquery-scrolltop-ile-yukari-cik-butonu/ for more information.

Please read the formatting help in the text editing box. Proper formatting is essential for readability, for the the person asking the question, and for those searching for similar answers in the future. — the Tin Man, Apr 09 '16 at 00:05

score 0 · Answer 3 · answered Apr 09 '16 at 00:12

0

Maybe your var gets rewritten somewhere in your code. Try another var name

answered Apr 09 '16 at 00:12

yezzz

2,990
1
10
19

variable assignment not working

3 Answers3