JavaScript variable won't increase with var++

Question

On a little website I made- click here if you want to see it.

Anyway, using jQuery, when you scroll down, you are yanked back up, the top text changes, and one variable increases. Depending on the value of the variable, the text at the top changes accordingly. The problem here is that the number doesn't change further. It only shows the first text, which is if the variable is equal to one, but does not exceed further. Here is the code with a few notes to express what I mean.

FUN = 0; //Does not have "var" so it can be global to the following function
window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
         FUN++; //Adds one to FUN variable.
         if(FUN==1){ //This stuff here executes just fine.
         scream.playclip(); //This also works too; don't worry.
         $("#text").replaceWith( "<h1>You should not have done that.</h1><br><img src='sck1.jpg'>" );
         } else if(FUN==2){ //This doesn't happen.
         $("#text").replaceWith( "<h1>Last chance to close the page.</h1>" );
         }
       $('html, body').animate({ scrollTop: 0 }, 'fast'); //This works- this is the thing that yanks the user's screen back up.
    }
};

Edit: This broke it... Thanks @Fabian.

     console.log(FUN + " before ++")
     FUN++;
     console.log(FUN + " after ++")

*"Does not have "var" so it can be global to the following function"* Fun fact: With `var`, it would still be "global" to the following function (even if not at global scope and not really global), because the function would *close over* it. More: [*How do JavaScript closures work?*](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — T.J. Crowder, Feb 27 '17 at 14:34
It is likely that your on scroll callback is firing so quickly that the value of `2` was never registered for `FUN`. Why don't you simply use `if (FUN > 1)` instead? — Terry, Feb 27 '17 at 14:36
Please update your question with a **runnable** [mcve] using Stack Snippets (the `[<>]` toolbar button). `FUN++` absolutely will increment `FUN`, so if you're not seeing the effect you want, the problem is something else, not that it's not being incremented. — T.J. Crowder, Feb 27 '17 at 14:36
This fun fact isn't fun... Haha anyways, try adding a `else` block with a `console.log` of your `FUN` variable, maybe the scroll is going to fast and you are incrementing your variable too quicly result being it does not enter the second if. — Nicolas, Feb 27 '17 at 14:36
@Terry & Nicolas: It doesn't matter how quickly the function is called, the first time it goes into that overall `if`, `FUN` **will** get the value 1 and `if (FUN == 1)` **will** be true. The next time, `FUN` will get the value 2 and `if (FUN == 2)` will be true. So even if it's called really quickly, the OP should see the second message if not the first (because it was gone too fast). — T.J. Crowder, Feb 27 '17 at 14:38
Question: where in the page is the code you've shown? What triggers it? Could it be rerunning (which would reset FUN to 0) after the first scroll event? FWIW, I suspect comments about scroll firing too fast are incorrect; if that were it, I would expect that the first time you scroll down, you'd see the second text appear. I could be wrong; not saying it's definitely not it, but it doesn't seem right to me. — Mark Adelsberger, Feb 27 '17 at 14:40
I dont see any reason why counting this variable should not work besides, that some of the code that is not shared here is messing with it. Add a console.log(FUN) at the beginning of your onscroll function to see the value in the console. — Fabian, Feb 27 '17 at 14:50
@MarkAdelsberger It is not re-running. All of this code is directly inside of . — DerpyCoal, Feb 27 '17 at 14:56
@DerpyCoal - well, then the code you've posted doesn't contain the problem. As it would be foolish from a security standpoint for me to follow your link, and you haven't posted enough code directly to reproduce the problem, the most more I can say is that using a global is bad practice that is likely in some way leading to the problem. — Mark Adelsberger, Feb 27 '17 at 15:24
I dont get your Edit of the question, how should adding a console.log break it ?? — Fabian, Feb 28 '17 at 16:09
@Fabian It didn't break it, some how the following (incomplete) line got mixed into the code, which broke things: `console.log(FUN + )` It's since been removed. — StephanieQ, Mar 03 '17 at 15:41

score 2 · Accepted Answer · edited May 23 '17 at 11:46

Actually, the variable fun IS increasing. Your problem has to do with your use of jQuery's replaceWith function. You're replacing the h1 with an id of text so jQuery can't replace it on the second run.

Here's a working demo. http://codepen.io/StuffieStephie/pen/WpvyjJ

Also here's a good question regarding the difference between jQuery's replaceWith() and html()

You can either change

$("#text").replaceWith("<h1>You should not have done that.</h1><br><img src='sck1.jpg'>");

to

$("#text").replaceWith("<h1 id='test'>You should not have done that.</h1><br><img src='sck1.jpg'>");

(Note the id of test) or use change your html to have a div with an id of test and use jQuery's .html() function instead.

var FUN = 0;
window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
         console.log(FUN + " before ++");
         FUN++;
         console.log(FUN + " after ++");
         beSpook(FUN);
       $('html, body').animate({ scrollTop: 0 }, 'fast');
    }
};



function beSpook(count){
  if (count ===1){
    console.log(count);
    scream.playclip(); 
    $("#text").html( "<h1>You should not have done that.</h1><br><img src='http://pointlessgame.x10.bz/scroller/sck1.jpg'>" );
  } else if ( count >= 2){
    $("#text").html( "<h1>Last chance to close the page.</h1>" );       
  }
}

    var audiotypes={
        "mp3": "audio/mpeg",
        "mp4": "audio/mp4",
        "ogg": "audio/ogg",
        "wav": "audio/wav"
    }

    function ss_soundbits(sound){
        var audio_element = document.createElement('audio')
        if (audio_element.canPlayType){
            for (var i=0; i<arguments.length; i++){
                var source_element = document.createElement('source')
                source_element.setAttribute('src', arguments[i])
                if (arguments[i].match(/\.(\w+)$/i))
                    source_element.setAttribute('type', audiotypes[RegExp.$1])
                audio_element.appendChild(source_element)
            }
            audio_element.load()
            audio_element.playclip=function(){
                audio_element.pause()
                audio_element.currentTime=0
                audio_element.play()
            }
            return audio_element
        }
    }
    var scream  = ss_soundbits('http://soundbible.com/grab.php?id=1627&type=mp3');

.color_heavy_red{ color: #FF1F1F;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">
<h1 class="color_heavy_red" >
Can't get to the bottom of this page.
</h1>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Thanks Stephanie! Really helped a lot. Will add an easter egg in the code containing your username :) — DerpyCoal, Feb 27 '17 at 16:12
No problem! I'm glad I was able to help :D A little heads up: In your `window.onscroll ` function, the line `console.log(FUN + )` is breaking stuff. Either get rid of it or change it to `console.log(FUN);` Don't forget your semi-colons and happy coding! :) — StephanieQ, Feb 27 '17 at 16:22
Thanks. I just realised, though, I updated my website code but the text jumps right to the second text? — DerpyCoal, Feb 27 '17 at 16:22
Nevermind, I found it! In the snippet there is... if (count ===1){. Well, mistakes happen! — DerpyCoal, Feb 27 '17 at 16:24
Ah it's cool. One thing worth noting: the text gets really big on the second run because it's inserting an `h1` into another `h1`. You might wanna change your html to this: `

Can't get to the bottom of this page.

` but it's not a super big deal if you like it big ;p — StephanieQ, Feb 27 '17 at 16:26
Thanks for the tip! I actually didn't know that was a thing that could happen, usually tags overwrite each other. — DerpyCoal, Feb 27 '17 at 16:28

JavaScript variable won't increase with var++

1 Answers1

Can't get to the bottom of this page.