I try to hide all the elements in the class (logos), except for the element that the button is clicked on. Therefore, I wrote this only to understand that it is impossible to pass arguments to functions activated by addEventListener! It seems ... inflexible, to say the least. Is there another obvious way to pass the argument that I'm blind (I'm pretty new to Javascript)?
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>Sexism in Silicon Valley</title>
</head>
<body id="body1">
<div class="parent">
<img src="kstartup.png" class="logos" id="id1">
<img src="uber.png" class="logos" id="id2">
<img src="kpcb.png" class="logos" id="id3">
<img id="id4" src="r1startup.png" class="logos">
</div>
<div class="parent" id="parent2">
<img src="zillow.png" class="logos" id="id5">
<img src="github.png" class="logos" id="id6">
<img src="tinde.png" class="logos" id="id7">
<img src="snapchat.png" class="logos" id="id8">
</div>
<script src="index.js"></script>
</body>
</html>
JavaScript:
function click(x) {
for (var i = 0; i < logos.length; i++) {
if (x !== i) {
logos[i].style.display = "hidden";
}
}
}
var logos = document.getElementsByClassName("logos");
for (var i = 0; i < logos.length; i++) {
logos[i].addEventListener('click', click(i));
}
source
share