Postingan lainnya

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?

javascript

@yudayuda

8 Kontribusi 4 Poin

Diperbarui 2 tahun yang lalu

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>

@Terra

81 Kontribusi 39 Poin

Dipost 2 tahun yang lalu

Tanggapan

terima kasih

@yudayuda

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>

@NauraFaradisa

12 Kontribusi 10 Poin

Dipost 2 tahun yang lalu

Tanggapan

terima kasih

@yudayuda