Onclick 函数在图片库中不执行任何操作

Question

我正在学习制作图片库，当我点击缩略图时，它没有任何反应。贝娄是我的代码，我正在尝试一些让它工作的东西，我能得到一些帮助吗？ HTML :

        <script src="galerijaSlika.js"></script>
        <img id="glavnaSlika" src="Slike/infogamer_galerija/info1.jpg">
        <div id="sveSlike" onClick="promjeniSliku(event)">
            <img src="Slike/infogamer_galerija/info1.jpg">
            <img src="Slike/infogamer_galerija/info2.jpg">
            <img src="Slike/infogamer_galerija/info3.jpg">
            <img src="Slike/infogamer_galerija/info4.jpg">
            <img src="Slike/infogamer_galerija/info5.jpg">
            <img src="Slike/infogamer_galerija/info6.jpg">
            <img src="Slike/infogamer_galerija/info7.jpg">
            <img src="Slike/infogamer_galerija/info8.jpg">
            <img src="Slike/infogamer_galerija/info9.jpg">
            <img src="Slike/infogamer_galerija/info10.jpg">
            <img src="Slike/infogamer_galerija/info11.jpg">
            <img src="Slike/infogamer_galerija/info12.jpg">
        </div>

Javascript :

function promjeniSliku(event){
     event = event || window.event;
     var trazeniElement = event.target || event.srcElement;
     if(trazeniElement == "IMG"){
          document.getElementById("glavnaSlika").src = trazeniElement.getAttribute("src");

     }
}

Answer 1

您的错字是：

if(trazeniElement == "IMG"){

正确的测试必须是：

if (trazeniElement.tagName == "IMG") {

详情见MDN

function promjeniSliku(event){
  event = event || window.event;
  var trazeniElement = event.target || event.srcElement;
  if (trazeniElement.tagName == "IMG") {
    document.getElementById("glavnaSlika").src = trazeniElement.getAttribute("src");
  }
}

<img id="glavnaSlika" src="Slike/infogamer_galerija/info1.jpg">
<div id="sveSlike" onClick="promjeniSliku(event)">
    <img src="Slike/infogamer_galerija/info1.jpg">
    <img src="Slike/infogamer_galerija/info2.jpg">
    <img src="Slike/infogamer_galerija/info3.jpg">
    <img src="Slike/infogamer_galerija/info4.jpg">
    <img src="Slike/infogamer_galerija/info5.jpg">
    <img src="Slike/infogamer_galerija/info6.jpg">
    <img src="Slike/infogamer_galerija/info7.jpg">
    <img src="Slike/infogamer_galerija/info8.jpg">
    <img src="Slike/infogamer_galerija/info9.jpg">
    <img src="Slike/infogamer_galerija/info10.jpg">
    <img src="Slike/infogamer_galerija/info11.jpg">
    <img src="Slike/infogamer_galerija/info12.jpg">
</div>

Answer 2

我成功了。我不得不改变周围的图像，并在 galeria 图像中获得更大的项目我必须进行字符串替换，随意删除该部分。

function promjeniSliku(event) {
  var target = event.target;
  if (target.tagName == 'IMG') {

    var src = target.src.replace(/100/g, '500');
    document.getElementById('glavnaSlika').src = src;
  }

}

<img id="glavnaSlika" src="//lorempixel.com/500/500/cats/1">
<div id="sveSlike" onclick="promjeniSliku(event)">
  <img src="//lorempixel.com/100/100/cats/1" alt="" />
  <img src="//lorempixel.com/100/100/cats/2" alt="" />
  <img src="//lorempixel.com/100/100/cats/3" alt="" />
  <img src="//lorempixel.com/100/100/cats/4" alt="" />
  <img src="//lorempixel.com/100/100/cats/5" alt="" />
  <img src="//lorempixel.com/100/100/cats/6" alt="" />
  <img src="//lorempixel.com/100/100/cats/7" alt="" />
  <img src="//lorempixel.com/100/100/cats/8" alt="" />
  <img src="//lorempixel.com/100/100/cats/9" alt="" />
  <img src="//lorempixel.com/100/100/cats/10" alt="" />
  <img src="//lorempixel.com/100/100/cats/11" alt="" />
  <img src="//lorempixel.com/100/100/cats/12" alt="" />

</div>

Onclick 函数在图片库中不执行任何操作

Onclick function does nothing in image gallery

html

javascript

image-gallery