JS onload help.

0 favourites
  • 6 posts
From the Asset Store
Game with complete Source-Code (Construct 3 / .c3p) + HTML5 Exported.
  • Not a JS coder but.

    function anipgbar(){
     var p = document.getElementsByClassName("animated"); // class name
     var orig = parseInt(p[0].getAttribute('orig')); // holds the original value of the pg bar
     var cval = parseInt(p[0].getAttribute('value')); // current value of the pg bar
     if (cval > orig) {
     p[0].setAttribute('value', orig); // set the pg bar back to original value
     p[0].setAttribute('value', orig+1); // add 1 to the pg bar value
    window.onload = function(){
    setInterval(anipgbar, 2000) // run the function every 2 seconds

    Is there any reason that shouldn't work? It's purpose is to animate a progress bar by increasing and the decreasing it's value. I know the css for it is loading and I know this works on codepen.io but it doesn't work when I load it into C3, and, I checked, it is loading the .js file.

  • The window load event fires as the runtime is loading. So assuming your script runs after that, it will not fire in your own scripts. You can just write your scripts assuming onload already fired.

  • Thanks Ashley Is there any way to get the script to fire when only a specific layout is visible?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Bump

    Getting annoying errors because the JS above is running regardless of the layout that's visible and it only affects one layout.

    So again, anyone know of a way to tell JS to only run when a specific layout is open?

  • This is a different question to the one you originally asked, which is kind of confusing. It sounds like the obvious thing to do would be to make the script run in a function, and call the JS function from events when you go to that layout.

  • Thanks Ashley ! I think the JS noob gets it! This is really cool, being able to call a custom JS function inside a layout.

    This works by calling skillStart() on start of layout and skillStop() on end of layout (to prevent it from creating multiple intervals) and basically, (along with some CSS) pulses a progress bar between two values.

    function anipgbar() {
     var p = document.getElementsByClassName("animated");
     var orig = parseInt(p[0].getAttribute('data-orig'));
     var cval = parseInt(p[0].getAttribute('value'));
     if (cval > orig) {
     p[0].setAttribute('value', orig);
     } else
     p[0].setAttribute('value', orig + 1);
    var drawInterval;
    function skillStop() {
    function skillStart() {
     drawInterval = setInterval(anipgbar, 2000);
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)