increment variable using jquery

Question

I feel like this is a pretty basic thing, but I cant seem to find the solution. Im trying to increment a value after the loading of an IFRAME.

the code looks like this:

var x=0;
$(document).ready(function() {
        $('#iframe-2').load(function() {
            var x=x+1;        
        });
        $('#iframe-3').load(function() {
            var x=x+1;    
        });
        $('#iframe-4').load(function() {
            var x=x+1;        
        });
        $('#iframe-5').load(function() {
            var x=x+1;        
        });
    });

What I want to do is give a number of loaded iframes that updates when an iframe completes its loading. The output code is like this currently:

<script language="javascript">
document.write(x + " Results");
</script>

thanks a ton in advance for any help!

You are creating a local copy of x each time you use a var. Remove var inside load function. Also, place var x = 0 inside document.ready — Jashwant
– Jashwant, Commented Jul 5, 2012 at 6:02
See xdazz's updated answer here, I think this is it, accept it. — The Alpha
– The Alpha, Commented Jul 5, 2012 at 7:41

The Alpha · Accepted Answer · 2020-12-02 21:44:50Z

17

You should change

var x = x+1;

to

x = x+1

Because the var keyword is creating a new variable every time in your every load so global variable x is not getting updated/incremented.

edited Dec 2, 2020 at 21:44

answered Jul 5, 2012 at 5:57

The Alpha

147k30 gold badges294 silver badges313 bronze badges

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

5 Comments

user791187 Over a year ago

Ok, I removed the semicolon from each, but Im still getting "0 results" when the iframes load. As a heads-up, Im really new to both javascript & jquery, so if its possible to dumb it down a little, I'd really appreciate it!

The Alpha Over a year ago

Not semicolons, remove the keyword var

user791187 Over a year ago

got it! thank you. Im still getting the same result..."0 results"

The Alpha Over a year ago

Put document.write(x + " Results"); after the last load of iframr.

user791187 Over a year ago

When I did this, it somehow broke the code...now nothing on the page loads except the "0 results" which appears at the top

xdazz · Accepted Answer · 2012-07-05 06:58:52Z

You declare local variable in the load callback function, so it will not increase the global x, you could declare var x inside of dom ready callback function, and use it in load callback function.

$(document).ready(function() {
    var x = 0;
    $('#iframe-2').load(function() {
        x++;        
    });
    $('#iframe-3').load(function() {
        x++;
    });
    $('#iframe-4').load(function() {
        x++;  
    });
    $('#iframe-5').load(function() {
        x++;  
    });
});

Edit: After this, document.write(x + " Results"); still won't work, because it executes before the iframe has been loaded. You need to do a check asynchronously.

Here is the live demo.

$(document).ready(function() {
    var x = 0;
    $('iframe').load(function() {
        x++;        
    });
    var time_id = setInterval(function() {
      $('#count').text(x);
      if (x === $('iframe').length) {
        clearInterval(time_id);
      }
    }, 200);
});

The html:

<iframe  src="http://www.w3schools.com"></iframe>
<iframe  src="http://www.w3schools.com"></iframe>
<iframe  src="http://www.w3schools.com"></iframe>
<iframe  src="http://www.w3schools.com"></iframe>
<hr>
Loaded iframe count: <span id="count">0<span>

user791187 · Accepted Answer · 2012-07-05 23:36:08Z

I finally came up with a very simple solution:

var x=0;

    $(document).ready(function() {

        $('#iframe-2').load(function() {
            $("#t2").css("display","inline");
            x++;
            document.getElementById("tabs-1").innerHTML=x + " Results";
        });

        $('#iframe-3').load(function() {
            $("#t3").css("display","inline");
            x++;
            document.getElementById("tabs-1").innerHTML=x + " Results";
        });

        $('#iframe-4').load(function() {
            $("#t4").css("display","inline");
            x++;
            document.getElementById("tabs-1").innerHTML=x + " Results";
        });
        $('#iframe-5').load(function() {
            $("#t5").css("display","inline");
            x++;
            document.getElementById("tabs-1").innerHTML=x + " Results";
        });
    });

st-boost · Accepted Answer · 2012-07-05 06:13:39Z

Javascript has "function scope" - variables exist only within the function they were created in. So it is possible to have several different variables named x, if and only if they are in different functions (which is the case here).

Variables are created with the var keyword and accessed without a keyword. So, var x = 10; creates a variable named x, and x = 10; modifies an existing variable named x.

In your code every function calls var x = 10;. Since the previously defined x was defined in an outer function, that line is valid and created a new variable named x, scoped to the function it is being called in. If you were to omit the var statement, the interpreter would first look at the current function's namespace and not find x. Then it would move up to the global scope and find the x that you already declared, and use that.

In short, omit the word var in every line except line 1:

var x = 0;
$(document).ready(function () {
    $('#iframe-2').load(function () {
        x = x + 1;
    });
    $('#iframe-3').load(function () {
        x = x + 1;
    });
    $('#iframe-4').load(function () {
        x = x + 1;
    });
    $('#iframe-5').load(function () {
        x = x + 1;
    });
});

thank you! I appreciate a lot the help...however I am still getting the same result :(
@user791187 Can you post the complete webpage you're using to test this?

gaurang171 · Accepted Answer · 2012-07-05 10:25:08Z

Another alter solution for above query using jQuery is here...

HTML:

<div id="top"></div>
<iframe  src="http://jquery.com/"></iframe>
<iframe  src="http://jquery.com/"></iframe>
<iframe  src="http://jquery.com/"></iframe>
<iframe  src="http://jquery.com/"></iframe>
<div id="bottom"></div>

JQuery:

var x = 0;
$(function() {
    $('iframe:eq(0)').load(function() {
        x = x + 1;
        result(x);
    });
    $('iframe:eq(1)').load(function() {
        x = x + 1;
        result(x);
    });
    $('iframe:eq(2)').load(function() {
        x = x + 1;
        result(x);
    });
    $('iframe:eq(3)').load(function() {
        x = x + 1;
        result(x);
    });

});

function result(x) {
    if (x == null || typeof(x) == "undefined") x = 0;
    $("#top").html("<div>Loaded iframe count: " + x + "</div><hr/>");
    $("#bottom").html("<hr/><div>Loaded iframe count: " + x + "</div>");
}

Try on codebins too http://codebins.com/codes/home/4ldqpbk

Collectives™ on Stack Overflow

increment variable using jquery

5 Answers 5

5 Comments

Comments

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

2 Comments

Comments

Linked

Related