Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
addEventListener tidak befungsi pada tag "i"
saya membuat HTMLÂ dan JS seperti ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset200802.css">
</head>
<body>
<div class="judul">
<h1>Q & A</h1>
</div>
<section>
<div class="pertanyaan">
<div class="isiPertanyaan">
<h2>Apakah belajar Pemograman akan berguna?</h2>
<div class="icons">
<i class="material-icons panah" id="panah">keyboard_arrow_down</i>
<i class="material-icons close" id="close">close</i>
</div>
</div>
<div class="jawaban">
<h3>Tentu, Belajar Pemograman sangat berguna</h3>
</div>
</div>
<div class="pertanyaan">
<div class="isiPertanyaan">
<h2>Apa bahasa pemograman yang populer?</h2>
<div class="icons">
<i class="material-icons panah" id="panah">keyboard_arrow_down</i>
<i class="material-icons close" id="close">close</i>
</div>
</div>
<div class="jawaban">
<h3>Python adalah bahasa pemograman yang populer</h3>
</div>
</div>
<div class="pertanyaan">
<div class="isiPertanyaan">
<h2>Apa yang harus dipelajari untuk pemula?</h2>
<div class="icons">
<i class="material-icons panah" id="panah">keyboard_arrow_down</i>
<i class="material-icons close" id="close">close</i>
</div>
</div>
<div class="jawaban">
<h3>HTML adalah langkah pertama dalam pembelajaran Web</h3>
</div>
</div>
</section>
<script>
const panah = document.querySelectorAll('.material-icons.panah');
for(i=0; i<panah.length; i++){
console.log(panah[i].innerHTML);
panah[i].addEventListener('click', myFun);
}
function myFun(e){
console.log("wow");
}
</script>
</body>
</html>
dan CSS seperti ini
.judul{
margin: 30px;
text-align: center;
font-size: 64px;
width: 100%;
}
/* section{
width: 100%;
} */
.pertanyaan{
width: 80%;
margin: 10px auto;
}
.isiPertanyaan{
width: 80%;
height: 30px;
margin: auto;
background-color: bisque;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.icons{
display: flex;
margin-left: 20px;
}
i{
display: block;
cursor: pointer;
}
.jawaban{
width: 80%;
height: 30px;
margin: auto;
background-color: rgb(189, 167, 140);
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
/* hover */
.panah.hover{
opacity: 0;
}
.close{
position: absolute;
opacity: 0;
}
.close.hover{
position: absolute;
opacity: 1;
}
.jawaban{
opacity: 0;
}
.jawaban.hover{
opacity: 1;
}
masalahnya kenapa addEventListener tidak berfungsi?
apakah selector saya salah?
2 Jawaban:
<div>sudah coba hapus cache browser ? <br><br>soalnya saya test, kode nya jalan <br><figure data-trix-attachment="{"contentType":"image/png","filename":"image.png","filesize":23030,"height":185,"url":"https://i.ibb.co/bb101fq/image.png","width":1279}" data-trix-content-type="image/png" data-trix-attributes="{"presentation":"gallery"}" class="attachment attachment--preview attachment--png"><img src="https://i.ibb.co/bb101fq/image.png" width="1279" height="185"><figcaption class="attachment__caption"><span class="attachment__name">image.png</span></figcaption></figure></div>
Tanggapan
terima kasih
Jawaban Terpilih
<div>selektornya tidak salah, tapi lebih baik eventnya dijalankan pada parentnya..<br>karena, bagian tag i tersebut kayaknya susah untuk di klik (saya pakai handphone)<br><br>ubah: </div><pre>const panah = document.querySelectorAll('.material-icons.panah');</pre><div><br>jadi : </div><pre>const panah = document.querySelectorAll('.icons');</pre><div><br></div>
Tanggapan
terima kasih