如何让事件监听器事件点击显示图像？

如何使用SetAttribute？我正在学习JS，并试图从30 Days of JS中吸取教训，以进一步推动我对JS的理解。如何让事件监听器事件点击显示图像？

基本上，我想要做的是任何“圈子”被点击，图像显示出来。

我刚刚开始学习JS。请尽可能以最简单的方式将其分解，而不是复杂或奇特的解决方案，因为他们不会进一步加深我对JS的理解。

TIA

这里是我的分拆上市代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Randomy</title> 
    <link rel="stylesheet" href="styles.css"> 
</head> 

<body> 

    <div class="circles"> 
     <div data-key="81" class="circle"> 
      <kbd>Q</kbd> 
      <span class="img">clap</span> 
     </div> 
     <div data-key="87" class="circle"> 
      <kbd>W</kbd> 
      <span class="img">hihat</span> 
     </div> 
     <div data-key="69" class="circle"> 
      <kbd>E</kbd> 
       <span class="img">kick</span> 
     </div> 
     <div data-key="82" class="circle"> 
      <kbd>R</kbd> 
      <span class="img">openhat</span> 
     </div> 
     <div data-key="84" class="circle"> 
      <kbd>T</kbd> 
      <span class="img">boom</span> 
     </div> 


     <img hidden data-key="81" src="img/icecream.jpg" /> 
     <img hidden data-key="87" src="img/mini-popsicles.jpg" /> 
     <img hidden data-key="69" src="img/mini-poptarts.jpg" /> 
     <img hidden data-key="82" src="img/mini-potpie.jpg" /> 
     <img hidden data-key="84" src="img/rainbow_ring.jpg" /> 


    <script> 
     document.addEventListener("click", myFunction); 

     function myFunction() { 
      var oy = document.getElementsByClassName("circles")[0]; 
      oy.getElementsByClassName("circle")[0].setAttribute("src", "img/mini-popsicles.jpg"); 
     } 

    </script> 


    </body>

来源

2017-08-26 user273072545345

的setAttribute作品你实现。此处的问题与您正在设置的属性本身有关。

您的circle类的元素是div。 Div没有src属性。

<div data-key="81" class="circle">

您可以通过多种方式来实现你正在尝试做的。例如，您可以使用默认情况下不显示的图像（display:none;）然后用JavaScript单击将src属性设置为您想要的图像，并显示它们以更改display属性。

否则，您可以使用div上的背景图像在div内显示图像

来源

2017-08-26 22:36:30 quirimmo

如何让事件监听器事件点击显示图像？

回答

相关问题