Onclick函數在圖像庫中不做任何事

我正在學習製作圖像庫，當我點擊縮略圖時，它什麼都不做。貝婁是我的代碼，我試圖讓它工作，我可以得到一些幫助嗎？ HTML：Onclick函數在圖像庫中不做任何事

 <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"); 

    } 
}

來源

2016-05-22 Antonio Gvardijan

難道'event'爲空或未定義，在這種情況下'trazeniElement！= 「IMG」'？你的瀏覽器控制檯是否有錯誤？ – Marc

@Marc當我刪除，如果，它的作品，但如果我點擊圖片之間，沒有顯示任何圖片，但它顯示破碎的圖片標誌。我在控制檯中沒有遇到任何錯誤。 –

將小狗改爲小貓，並返回：https：//jsfiddle.net/hsLebj5g/（通過jQuery修復onClick任務並檢查tagName和nodeName以區分大小寫匹配'img'） –

您的錯字是：

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>

來源

2016-05-22 21:11:56 gaetanoM

我得到了這個工作。我不得不改變周圍的圖像，並獲得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>

來源

2016-05-22 21:12:17 Jhecht

Onclick函數在圖像庫中不做任何事

回答

相關問題