Автоматически нажмите кнопку, когда загружается страница html

-1

Я пытаюсь создать галерею изображений на странице html. Там, где у меня три кнопки, и каждая кнопка связана с изображением. Если я нажму кнопку 1, тогда отобразится изображение, связанное с ним. Я уже это сделал. Но, когда я загружаю страницу, я хочу автоматически нажать первую кнопку. MY Javascript и HTML коды ниже.Автоматически нажмите кнопку, когда загружается страница html

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>

источник

2015-09-11 cyberoy

-1

Вы можете использовать следующий код. Он автоматически щелкнет кнопку с идентификатором «buttonId» при загрузке страницы.

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#buttonId").click(); 
}); 
</script>

источник

2015-09-11 08:55:22

это JQuery, НЕ JavaScript –

window.onload = function() { document.getElementById ('но tonId ') нажмите(). } –

Это в конечном счете, довольно легко выполнить с помощью этого фрагмента кода:

window.onload = function() { 
    showImg(1); 
}

источник

2015-09-11 08:55:24

Не нужно ждать события 'load', это слишком долго, если на странице – Tushar

есть много внешних ресурсов. Вопрос был« когда загружается страница », поэтому ответ был естественно« window.onload » –

Почему просто не позвонить showImg(1);?

источник

2015-09-11 08:55:42

Вы можете вызвать функцию showImg на событие загрузки Dom. Если у вас есть script внизу <body>, вы можете даже вызвать функцию напрямую, но если у вас есть сценарий в <head>, используйте событие загрузки Dom.

Я также улучшил код.

Использовать массив путей изображения. не Вложенный массив

jsFiddle Demo

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="" />

Редактировать

Если addEventListener не поддерживается, вы можете использовать attachEvent.

См addEventListener Browser Compatibility

if (document.attachEvent) { 
    // Use attachEvent to bind event 
} else { 
    // Use addEventListener 
}

источник

2015-09-11 08:56:22 Tushar

, как это решить вопрос? –

@ ZathrusWriter Просьба проверить обновленный код – Tushar

стоит отметить обходной путь для браузеров, которые поддерживают 'attachEvent' вместо' addEventListener' –

Для JavaScript вы можете использовать следующие

window.onload = function(){ 
    document.getElementById('buttonId').click(); 
}

источник

2015-09-11 09:01:20

по вызову нагрузки функция с следующий код

var e = document.createEvent('MouseEvents'); 
e.initMouseEvent('mousedown'); 
document.getElementById('buttonId').dispatchEvent(e);

источник

2015-09-11 09:01:59

Автоматически нажмите кнопку, когда загружается страница html

ответ

Смежные вопросы