var post = 10;
function load_more(str) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("add").innerHTML = document.getElementById("add").innerHTML + xmlhttp.responseText;
            }
        };
        var post = post + 10;
        xmlhttp.open("GET", "fetch_more.php?number=" + post , true);
        xmlhttp.send();
}

When i load the website i expect the browser to define the value 10 to post and do nothing more until i press a button that calls the load_more() function which increments that value by 10 and passes it to the PHP via Ajax.

The desired behaveiour is to have 10 post on the site and then load 10 more on button press each time the button is pressed.

But PHP just throws an MySQL error and the log shows that the post var is NaN.

var post = 10;
function load_more(str) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("add").innerHTML = document.getElementById("add").innerHTML + xmlhttp.responseText;
            }
        };
        var post = post + 10;
        xmlhttp.open("GET", "fetch_more.php?number=" + post , true);
        xmlhttp.send();
}

When i load the website i expect the browser to define the value 10 to post and do nothing more until i press a button that calls the load_more() function which increments that value by 10 and passes it to the PHP via Ajax.

The desired behaveiour is to have 10 post on the site and then load 10 more on button press each time the button is pressed.

But PHP just throws an MySQL error and the log shows that the post var is NaN.

• javascript

Share Improve this question Follow edited Jan 2, 2016 at 18:48 Ognjen Galić asked Jan 2, 2016 at 18:47 Ognjen GalićOgnjen Galić 2,74233 gold badges2626 silver badges3535 bronze badges 2

• 6 REMOVE var from var post = post + 10;. – Tushar Commented Jan 2, 2016 at 18:48
• Bloody hell...it works...thanks! – Ognjen Galić Commented Jan 2, 2016 at 18:49

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

The line

var post = post + 10;

is the culprit here. Javascript has a behaviour called hoisting, which essentially means that your variables are always declared at the top of the scope.

So in your code, what happens is the following:

var post = 10;
function load_more(str) {
    var post; // `post` is now undefined
    //...other code
    post = post + 10; // undefined + 10 evaluates to NaN
}

I hope you can see that since post is re-defined at the beginning of the function, post is undefined when you use it in post + 10, which causes post = post + 10 to evaluate to NaN (since undefined + 10 evaluates to NaN).

To solve your problem, just remove var from the front:

post = post + 10;

or:

post += 10;

You're reinitializing the variable using the keyword var and that's the problem.

A simple post += 10; would work fine.

The reason for this is that var indicates declaring a new variable. So you are trying to create a new variable, and set its value to itself + 10. The default value for a new variable is undefined, so you were saying "var post = undefined + 10", which is NaN

use post += 10 or post = post + 10

Inside your function remove var. It hides variable post which is declared outside the function.