0
SetAttributeはどのように使用されますか？私はJSを学んでいて、30 Days of JSのレッスンからスピンオフしてJSの理解を深めようとしています。イベントリスナーのイベントを表示する画像を表示するをクリックしますか？
基本的に、私がしようとしているのは、「サークル」のいずれかがクリックされ、画像が表示されるということです。
私はちょうどJSを学び始めています。 JSを理解するために何もしないので、可能な限りシンプルな言葉で分解してください。あなたが実装され
<!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>