Can you explain how SetAttribute is utilized in JavaScript? I recently started learning JS and wanted to expand on a lesson from a website called 30 Days of JS to deepen my understanding of the language.
My goal is to display an image whenever any of the "circle" elements are clicked on.
Since I am just starting out with JS, I would appreciate it if you could break down the concept in simple terms, avoiding complex or fancy solutions that may not help me grasp the fundamentals effectively.
Thank you in advance!
Below is the code snippet I have been working on:
<!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>