Function works when called in body unload, but not when called as part of another function

Question

So here's the scoop - I've got a page with an animated progress bar in it here:

http://bushidodesigns.net/consumer/webapp/funnel/receipts.htm

The script that animates the bar looks like this:

function run() {

var obj = document.getElementById('p1');

if (obj.getAttribute("data-value") < 100) {
  obj.setAttribute("data-value", parseInt(obj.getAttribute("data-value")) + 5);
  obj.setAttribute('aria-valuenow', obj.getAttribute("data-value"));
  obj.style.width = obj.getAttribute("data-value") + "%";
}

And I'm firing it on page load like so:

<body class="step" onLoad="run()">

That works fine. But what I'm trying to do is put the progress bar in an external file, and load it into the page when the user clicks a link like this:

$(document).on('click','#load-email',function() {
$("article").load("../loaders/email.htm");
run();
});

When I do that, the progress bar loads into the page, but it loads at 100%, doesn't animate, and throws this error - "TypeError: obj is null if (obj.getAttribute("data-value") < 100) {"

Here's a link:

http://bushidodesigns.net/consumer/webapp/funnel/email.htm

Click the "continue" button to see the issue.

Any idea what is causing this? I'm completely stumped.

Answer 1

Call run() after email.htm loads.

$(document).on('click','#load-email',function() {
    $("article").load("../loaders/email.htm", {}, function() {
        run();
    });
});

Function works when called in body unload, but not when called as part of another function

Question

1 answers

solution1
1 ACCPTED 2015-05-05 02:20:46

Function works when called in body unload, but not when called as part of another function

Question

1 answers

solution1 1 ACCPTED 2015-05-05 02:20:46

solution1
1 ACCPTED 2015-05-05 02:20:46