所以当我点击<p>家庭class的标签时,我希望它把颜色改为绿色,但它不起作用,我想知道为什么。点击注册正常(因为 console.log("test") 显示正常),但更改颜色的其余功能将不起作用。这是我的 css、html 和 js 代码(js 代码包含在 HTML 中,所以它不是外部文件或任何东西):
.greyRect {
  height:150px;
  width:1350px;
  background-color: #D3D3D3;
}
h1 {
  text-align: center;
}
h2 {
    text-align: center;
}
.home {
box-sizing: border-box;
width:80px;
height:35px;
line-height: 2;
  position: relative;
left:350;
  color:white;
}
.casinocraps {
  background-color: grey;
box-sizing: border-box;
width:120px;
height:35px;
text-align: center;
line-height: 2;
  position: relative;
left:460;
bottom:50;
  color:white;
}
.tictactoe {
  background-color: grey;
  box-sizing: border-box;
  width:90px;
  height:35px;
  text-align: center;
line-height: 2;
    position: relative;
left:600;
bottom:100;
    color:white;
}
.bingo {
  background-color: grey;
  box-sizing: border-box;
  width:80px;
  height:35px;
  text-align: center;
  line-height: 2;
    position: relative;
  left:700;
  bottom:150;
    color:white;
}
.concentration {
  background-color: grey;
  box-sizing: border-box;
  width:100px;
  height:35px;
  text-align: center;
  line-height: 2;
    position: relative;
  left:800;
  bottom:200;
    color:white;
}
footer {
  text-align: center;
    line-height: 4;
      position: relative;
  top:125;
  right:15;
  height:70px;
  width:1365px;
  background-color: #D3D3D3;
}
.border {
  height: 50px;
  width: 100px;
  border: 4px solid green;
  background-color: #555;
  position: relative;
  top:20;
  left:100;
}
.rectangle {
  height: 50px;
  width: 100px;
  background-color: #555;
  position: relative;
  top:50;
  left:100;
}
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
      <link rel="stylesheet" type="text/css" href="cssForAss4.css">
  </head>
  <body>
<header class="greyRect" >
<h1>Assignment 1</h1>
<h2>Home Page</h2>
<nav>
<p class="home" onclick="selectHome()">
Home
</p>
<p class="casinocraps">
<b>Casino Craps</b>
</p>
<p class="tictactoe">
<b>Tic-Tac-Toe</b>
</p>
<p class="bingo">
<b>Bingo</b>
</p>
<p class="concentration">
<b>Concentration</b>
</p>
</nav>
<div class="border">
</div>
<footer >Footer</footer>
</header>
<script>
function selectHome() {
  console.log("test");
document.getElementsByClassName("home").style += "background-color:green;";
}
</script>
  </body>
</html>