Question

我正在尝试将简单的鼠标事件添加到html元素中，但我不断收到上述错误，我不知道为什么。

谁能帮助我。我只希望html元素在鼠标悬停时更改其颜色。应该没有那么难。也许是因为我在Bootstraps文件结构的顶部编写代码，但那里出了点问题。

var a = document.getElementById("barra2");

a.addEventListener("click", handlemouse);

function handlemouse() {
  document.getElementById("barra2").style.color = "#7B3FBF";
}

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css">
    <script src="main.js"></script>
</head>
<body>
    <div class="container-fluid">
      <div class="artbox">
        <div class="row">
          <div class="col-md-8">
            <p class="h-100 d-inline-block" ; id="barra1"></p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <p class="h-100 d-inline-block" ; id="barra2">b2</p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <p class="h-100 d-inline-block gradient" ; id="barra3"></p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <p class="h-100 d-inline-block gradient" ; id="barra4"></p>
          </div>
          <div class="row">
            <div class="col-md-4">
              <p class="h-100 d-inline-block gradient" ; id="barra5"></p>
            </div>
          </div>
        </div>
      </div>
</body>

无法将事件监听器添加到html元素

0 个答案: