Question

我一直在尝试设置音乐应用，但是问题是事件监听器不适用于onclick事件。我为每个div标签设置了鼓类，并设置了一个onclick事件处理程序，但是当我单击div时，什么也没有发生，请为我提供一些解决方案。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Music App</title>
     <!-- Compiled and minified CSS -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <style> 
    </style>
    <script>
        window.onload=()=>{
            var drums=document.querySelector('.drum');
            drums.addEventListener('click',()=>{alert("Hi");})
        }
        </script>
</head>
<body style="margin:0;padding:0; height: 100vh; " >
    <section class="center container">
        <h2 class="center container grey-text text-darken-3">
            Tap Music
        </h2>
        <br><br>
        <h5 class="center container grey-text text-darken-1">Create Music With Just A Tap</h5>
    </section>




    <div class="row" style="height:20vh; position: absolute; bottom: 0px; width: 100%;">
        <div class="  drum col s4 m2 green lighten-2  " style=" height: 100%;
        
        cursor: pointer !important;" ></div>
        <div class=" drum col s4 m2 red lighten-2" style=" height: 100%;
        
        cursor: pointer !important;"  ></div>
        <div class=" drum col s4 m2 purple lighten-2" style=" height: 100%;
        
        cursor: pointer !important;"></div>
        <div class=" drum col s4 m2 yellow darken-2" style=" height: 100%;
        
        cursor: pointer !important;" ></div>
        <div class=" drum col s4 m2 indigo lighten-2" style=" height: 100%;
        
        cursor: pointer !important;" ></div>
        <div class=" drum col s4 m2 blue lighten-2" style=" height: 100%;
        
        cursor: pointer !important;" ></div>
    </div>
    
</body>
</html>

事件监听器不适用于onclick事件，请在我的鼓div上进行设置

0 个答案: