Auto click the button when html page loads
Question
I am trying to create a image gallery in a html page. Where I have three buttons and each button is connected with image. If I click button1 then it will display the picture associates with it. I already done that. But, I want to auto click first button when page loads. MY Javascript and HTML codes are below.
var imgs = [ //arrays index start at 0.. [], ["http://s9.postimg.org/849kk35kr/bg_play_pause.png"], ["http://s9.postimg.org/u4uiegdmj/image_1.jpg"], ["http://s9.postimg.org/3mbv5qewr/image_2.jpg"], ]; function showImg(imgIndex) { document.getElementById('img1').src = imgs[imgIndex][0]; }
<div class="col-md-offset-5"> <button type="submit" class="round-button-circle" onclick="showImg(1)"></button> <button type="submit" class="round-button-circle" onclick="showImg(2)"></button> <button type="submit" class="round-button-circle" onclick="showImg(3)"></button> </div>
6 answers
solution1
4 2015-09-11 08:56:22
You can call the showImg function on Dom load event. If you have script at the bottom of <body> you can even call the function directly, but if you have the script in the <head> use Dom load event.
I've also improved the code.
Use array of image paths. not nested array
var imgs = [ "http://s9.postimg.org/849kk35kr/bg_play_pause.png", "http://s9.postimg.org/u4uiegdmj/image_1.jpg", "http://s9.postimg.org/3mbv5qewr/image_2.jpg" ]; function showImg(imgIndex) { document.getElementById('img1').src = imgs[imgIndex - 1]; } document.addEventListener('DOMContentLoaded', function() { showImg(1); }, false);
<div class="col-md-offset-5"> <button type="submit" class="round-button-circle" onclick="showImg(1)">First</button> <button type="submit" class="round-button-circle" onclick="showImg(2)">Second</button> <button type="submit" class="round-button-circle" onclick="showImg(3)">Third</button> </div> <img id="img1" src="" />
Edit
If addEventListener is not supported, you can use attachEvent .
See addEventListener Browser Compatibility
if (document.attachEvent) {
// Use attachEvent to bind event
} else {
// Use addEventListener
}
solution2
3 2015-09-11 08:55:24
This is eventually fairly easy to accomplish by this snippet of code:
window.onload = function() {
showImg(1);
}
solution3
1 2015-09-11 08:55:42
Why not just call showImg(1); ?
solution4
0 2015-09-11 09:01:20
For javaScript you can use following
window.onload = function(){
document.getElementById('buttonId').click();
}
solution5
0 2015-09-11 09:01:59
On Load call a function with following code
var e = document.createEvent('MouseEvents');
e.initMouseEvent('mousedown');
document.getElementById('buttonId').dispatchEvent(e);
solution6
-1 2015-09-11 08:55:22
You can use following code. It will auto click the button having id as "buttonId" on page load.
<script type="text/javascript">
$(document).ready(function(){
$("#buttonId").click();
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.