How can I make a function run automatically in html page?

Question

I'm working on a dynamic html page with JavaScript and I want to run a function automatically without using onclick and I want to execute it with a delay.

I tried setTimeout() but it didn't work as expected.

How can I convert the code below to run function updateSliderValue() automatically with delay but without button?

<!--creating a container for the input box--> 
<div><button onclick="updateSliderValue();">Set value</button></div>

the code is:

    }
         function updateSliderValue() {
            slider = widget.getByName("Slider1");
            slider.setValue();
        }

    </script>
</head>
<body>
<div style="clear: both; margin-top: 40px;"></div>
<div class="cell">
        <div class="container" style="height: 100px;">
            <div class="widget" style="height: 100%;" id="root">
            </div>
        </div>
    </div>
    <!--creating a container for the input box--> 
    <div><button onclick="updateSliderValue();">Set value</button></div> 


</body>
</html>

thank you so much for your effort and your time but i don't know where put the code you gave to me.

"I tried setTimeout() but it didn't work as expected." — Well, that is the tool to use. We can't tell why your attempt to use it didn't work as expected because (a) you haven't shown us your attempt and (b) you haven't told us how the behaviour you got differed from what you expected. — Quentin
– Quentin, Commented Jan 12, 2016 at 9:49
@Quentin - the expected was one of my contributions to the edit. He just said "setTimout did not work" - same effect though :) — mplungjan
– mplungjan, Commented Jan 12, 2016 at 9:52

Jaffer · Accepted Answer · 2016-01-12 09:57:41Z

2

function updateSliderValue() {
  //work
}

(function() {
  setTimeout(updateSliderValue,1000);
})();

or when the page has to be loaded then below

$(function() {
    setTimeout(updateSliderValue,1000);
});

edited Jan 12, 2016 at 9:57

answered Jan 12, 2016 at 9:40

Jaffer

2,97819 silver badges29 bronze badges

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

6 Comments

mplungjan Over a year ago

Note: the first code will start the timeout immediately the code is run. The second will wait until page load

Jaffer Over a year ago

yes, just wanted to give him both options. he did not mention anything about page load, but yes, i should mention it in my answer

ITLover Over a year ago

thank you so much for your effort and your time but i don't know where put the code you gave to me.

Jaffer Over a year ago

just below updateSliderValue function in your code, you can add $(function() { setTimeout(updateSliderValue,1000); });

ITLover Over a year ago

i put like this but no result:

} 		 function updateSliderValue() { 			slider = widget.getByName("Slider1");             slider.setValue(); 		} 		$(function() { setTimeout(updateSliderValue,500); });     </script> </head> <body> <div style="clear: both; margin-top: 40px;"></div> <div class="cell">         <div class="container" style="height: 100px;">             <div class="widget" style="height: 100%;" id="root">             </div>         </div>     </div>     <!-- -->  	<div><button onclick="updateSliderValue();">Set value</button></div>  </body> </html>

|

NiallMitch14 · Accepted Answer · 2016-01-12 09:45:42Z

0

To run code on page load, you can use the window.onload function:

window.onload = function() {
  updateSliderFunction();
};

Or you can use $(document).ready for jquery solution:

$(document).ready(function(){
    updateSliderFunction();
});

edited Jan 12, 2016 at 9:45

answered Jan 12, 2016 at 9:39

NiallMitch14

1,2371 gold badge13 silver badges32 bronze badges

Collectives™ on Stack Overflow

How can I make a function run automatically in html page?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related