CODEWITHSUNDEEP
javascriptjquery
user791187
user791187

Reputation: 717

increment variable using jquery

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!

Upvotes: 9

Views: 86892

Answers (5)

The Alpha
The Alpha

Reputation: 146239

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.

Upvotes: 17

user791187
user791187

Reputation: 717

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";
        });
    });

Upvotes: 3

gaurang171
gaurang171

Reputation: 9090

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

Upvotes: 0

xdazz
xdazz

Reputation: 160923

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>

Upvotes: 7

st-boost
st-boost

Reputation: 1907

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;
    });
});

Upvotes: 0

Related Questions