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? — T.J. Crowder
– T.J. Crowder, Commented Feb 27, 2017 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
– Terry, Commented Feb 27, 2017 at 14:36
Please update your question with a runnable minimal reproducible example 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
– T.J. Crowder, Commented Feb 27, 2017 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
– Nicolas, Commented Feb 27, 2017 at 14:36
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
– Mark Adelsberger, Commented Feb 27, 2017 at 14:40

Community · Accepted Answer · 2017-05-23 11:46:07Z

2

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>

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Feb 27, 2017 at 15:59

StephanieQ

8921 gold badge13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

DerpyCoal Over a year ago

Thanks Stephanie! Really helped a lot. Will add an easter egg in the code containing your username :)

StephanieQ Over a year ago

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! :)

DerpyCoal Over a year ago

Thanks. I just realised, though, I updated my website code but the text jumps right to the second text?

DerpyCoal Over a year ago

Nevermind, I found it! In the snippet there is... if (count ===1){. Well, mistakes happen!

StephanieQ Over a year ago

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: <div id="text"> <h1 class="color_heavy_red" > Can't get to the bottom of this page. </h1> </div> but it's not a super big deal if you like it big ;p

|

Collectives™ on Stack Overflow

JavaScript variable won't increase with var++

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related