#javascript #html
#javascript #HTML
Вопрос:
Я просмотрел множество похожих сообщений, в большинстве из которых есть предыдущая кнопка, но мне нужна только одна кнопка, чтобы вернуться к исходной фотографии после ее циклического просмотра. Я попытался скорректировать свой код, следуя этим сообщениям, и я вроде понимаю, но я все еще получаю ошибку за ошибкой всякий раз, когда я настраиваю. Итак, я хотел задать вопрос, специфичный для моей проблемы, и надеюсь, что кто-нибудь сможет объяснить / дать указания, где я ошибаюсь.
<script>
var main = document.getElementById("tool");
var imgArray = ["/tools/saw.jpg","/tools/chisels.jpg","/tools/pitchfork.jpg"];
var imgIndex = 0;
function switchImg(){
main.setAttribute("src",imgArray[imgIndex]);
imgIndex = (imgIndex 1) % imgArray.length;
}
</script>
<style>
img{
display: block;
margin-left: auto;
margin-right: auto;
}
.buttons{
text-align: center;
}
</style>
</head>
<body>
<img id="tool" src="/tools/saw.jpg" height="248" width="364" alt="Saw"/>
<br/>
<div class="buttons">
<button type="button" onClick="switchImg();"> Next </button>
Ошибка
Я подумал, что мне может понадобиться оператор for, но я не понимаю, как я буду вызывать id=tool (внутри тела) в операторе for . Любая помощь приветствуется.
Ответ №1:
Ваш html-элемент еще не существует. Вам нужно поместить свой скрипт внизу
Вот так:
<style>
img{
display: block;
margin-left: auto;
margin-right: auto;
}
.buttons{
text-align: center;
}
</style>
</head>
<body>
<img id="tool" src="/tools/saw.jpg" height="248" width="364" alt="Saw"/>
<br/>
<div class="buttons">
<button type="button" onClick="switchImg();"> Next </button>
<script>
var main = document.getElementById("tool");
var imgArray = ["/tools/saw.jpg","/tools/chisels.jpg","/tools/pitchfork.jpg"];
var imgIndex = 0;
function switchImg(){
main.setAttribute("src",imgArray[imgIndex]);
imgIndex = (imgIndex 1) % imgArray.length;
}
</script>
Из-за загрузки HTML он загружается сверху вниз, сначала заголовок, затем тело и все внутри тела. Вот почему лучше всего размещать свой тег внизу перед закрывающим тегом
Также вы можете использовать
window.onload
или jQuery
$( document ).ready()
Комментарии:
1. Оооооо! Это сработало! Спасибо! Но подождите, я думал, что скрипты всегда должны быть во главе HTML-документа? Почему здесь должно быть по-другому??
2. Пожалуйста, посмотрите мое обновление. Также вы можете прочитать о теге script, есть много атрибутов, которые могут вам помочь developer.mozilla.org/en-US/docs/Web/HTML/Element/script
3. Я вроде как хочу выбросить свою книгу на этом этапе. Не упоминает и не практикует сценарии, находящиеся вне заголовка. Спасибо за вашу помощь и объяснение!