javaScript单击事件解答

点击按钮无法给div元素传入空值


html>
<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>title>
    <link rel="stylesheet" href="04.css">
    <style type="text/css">
       .test{
         width:100px;
         height:100px;
         background:red;
         text-align:center;
         line-height:100px;
         margin:0 auto;
       } 
       .hh{
       margin:10px auto;
       display:block;
       }    
   style>
     
  head>
<body>
    <div class="test">worddiv>
  <button class="hh">点击删除Textbutton>
  <script type="text/javascript" rel="script">
    
        var a = document.getElementsByClassName("test");
        var b = document.getElementsByClassName("hh");
        b.onclick=function(){
          a.innerHTML="";
        };
     script>
body>
html>

您好，document.getElementsByClassName返回的是一个数组，所以要指定元素去操作，例如条件点击事件和赋值


var a = document.getElementsByClassName("test")[0];
        var b = document.getElementsByClassName("hh")[0];
        b.onclick=function(){
          a.innerHTML="";
        };

getElementsByClassName方法返回是个数组，所以获取第一个元素

getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

var test = document.getElementsByClassName("test");
var hh = document.getElementsByClassName("hh");
        hh[0].onclick = function(){
          test[0].innerHTML = "";
        };

getElementsByClassName返回的是一个集合，因此要加一个下标才能访问。

    var a = document.getElementsByClassName("test")[0];
    var b = document.getElementsByClassName("hh")[0];
    b.onclick=function(){
        alert("ok");
        a.innerHTML="";
    };