Как использовать свойство onclick для функции в javascript [closed]

0

У меня есть страница, которая в основном имеет четыре эскиза изображения в тегах <ul>. Ниже приведена другая область изображения. Когда вы нажимаете миниатюру, отображается полное изображение

<body>
<h1>Image Gallery</h1>
<ul>
<li><img class="preview" src="images/blue.jpg" title="blue"></li>
<li><img class="preview" src="images/red.jpg" title="red"></li>
<li><img class="preview" src="images/yellow.jpg" title="yellow"></li>
<li><img class="preview" src="images/green.jpg" title="green"></li>
</ul>
<h2>Picture Description</h2>
<img id="large" src="images/blue.jpg">
</body>

Код JS находится здесь:

var preview=document.getElementsByClassName("preview")
var target=document.getElementById("large")
var desc=document.getElementsByTagName("h2")[0]
for (var i=0;i<preview.length;i++) {
    function showpic() {
        target.src=preview[i].src
        target.innerHTML=preview[i].title
    }
    preview[i].onclick=showpic
}
Теги:

2 ответа

1

Вы были рядом! Проблема с определением функции в таком цикле состоит в том, что все клики запускали последнюю версию функции. Использование this позволяет избежать этой проблемы, поскольку нам нужно только один раз определить showpic.

function showpic(){
    var target=document.getElementById("large")
    target.src=this.src
    target.innerHTML=this.title
}

var preview=document.getElementsByClassName("preview")
var desc=document.getElementsByTagName("h2")[0]
for (var i=0;i<preview.length;i++) {
    preview[i].onclick=showpic
}

EDIT Есть что-то, что вы также можете сделать, это ближе к вашему стилю программирования, я думаю:

var preview=document.getElementsByClassName("preview")
var target=document.getElementById("large")
var desc=document.getElementsByTagName("h2")[0]
for (var i=0;i<preview.length;i++)
{
    preview[i].onclick=function(event1){
        target.src=event1.srcElement.src
        target.innerHTML=event1.srcElement.title
    }
}
  • 0
    спасибо но сейчас работает. Журнал консоли не показывает сообщение об ошибке.
-1
try this.
var preview=document.getElementsByClassName("preview")
var target=document.getElementById("large")
var desc=document.getElementsByTagName("h2")[0]
for (var i=0;i<preview.length;i++)
{
preview[i].onclick=showpic();
}
function showpic(){
target.src=preview[i].src
target.innerHTML=preview[i].title
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню