我有 3 个按钮，每个按钮都有一个 JavaScript 函数，只有一个可以工作答案

【问题标题】：I have 3 buttons with a JavaScript function each and only one of them working我有 3 个按钮，每个按钮都有一个 JavaScript 函数，只有一个可以工作
【发布时间】：2019-01-01 09:33:56
【问题描述】：

我一直在尝试进行 Chrome 扩展。我有 3 个 div，我需要它们仅在单击按钮时显示（每个 div 响应一个按钮）。我还需要隐藏 2 个 div（只有一个 div 同时显示）。

这是我目前的代码：

JavaScript（是 Chrome 扩展，因此 JavaScript 必须在单独的文件中）：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('#hsp').addEventListener('click', myFunctionHSP);
  document.querySelector('#latam').addEventListener('click', myFunctionLATAM);
  document.querySelector('#mlb').addEventListener('click', myFunctionMLB);
});

function myFunctionHSP() {
  var hsp = document.getElementById("toggleHSP");
  var latam = document.getElementById("toggleLATAM");
  var mlb = document.getElementById("toggleMLB");

  if (hsp.style.display === "none") {
    hsp.style.display = "block";
    latam.style.display = "none";
    mlb.style.display = "none";
  }
}

function myFunctionLATAM() {
  var hsp = document.getElementById("toggleHSP");
  var latam = document.getElementById("toggleLATAM");
  var mlb = document.getElementById("toggleMLB");

  if (latam.style.display === "none") {
    latam.style.display = "block";
    hsp.style.display = "none";
    mlb.style.display = "none";
  }
}

function myFunctionMLB() {
  var hsp = document.getElementById("toggleHSP");
  var latam = document.getElementById("toggleLATAM");
  var mlb = document.getElementById("toggleMLB");

  if (mlb.style.display === "none") {
    mlb.style.display = "block";
    latam.style.display = "none";
    hsp.style.display = "none";
  }
}

#header {
  width: 400px;
  display: inline-block;
  margin: 10px;
  margin-left: 50px;
  margin-right: 50px;
  text-align: center;
}

#toggleHSP {
  widht: 400px;
  height: 400px;
  border-color: red;
  display: none;
}

#toggleLATAM {
  widht: 400px;
  height: 400px;
  border-color: red;
  display: none;
}

#toggleMLB {
  widht: 400px;
  height: 400px;
  border-color: red;
  display: none;
}

.division {
  background-color: white;
  border-width: 0px;
  min-width: 100px;
  min-height: 50px;
}

.division:hover {
  background-color: blue;
  color: white;
}

<html>
<head>
  <title>Page Title</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
  <div id="header"> <button class="division" id="hsp" onclick="myFunction()"> HSP </button> <button active class="division" id="latam"> LATAM </button> <button class="division" id="mlb"> MLB </button></div>
  <div id="toggleHSP">
    TEST HSP
  </div>
  <div id="toggleLATAM">
    TEST LATAM
  </div>
  <div id="toggleMLB">
    TEST MLB
  </div>
  <div> Test info bar </div>
</body>
</html>

如果我能得到任何帮助，我会很高兴。

【问题讨论】：

= -> 赋值，== 或 === -> 比较
HTML document.querySelector('#latam')中的这个元素在哪里

标签： javascript html css toggle visibility

【解决方案1】：

一些小错误：

1) 您的#hsp div 设置了onclick=myfunction()，它不存在并导致错误。

2) 您的 #cross 按钮的查询选择器之一错误，它正在寻找不存在的 #latam

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('#hsp').addEventListener('click', myFunctionHSP);
  document.querySelector('#cross').addEventListener('click', myFunctionLATAM);
  document.querySelector('#mlb').addEventListener('click', myFunctionMLB);
});


function myFunctionHSP() {
  var hsp = document.getElementById("toggleHSP");
  var latam = document.getElementById("toggleLATAM");
  var mlb = document.getElementById("toggleMLB");
  if (hsp.style.display !== "block") {
    hsp.style.display = "block";
    latam.style.display = "none";
    mlb.style.display = "none";
  }
}

function myFunctionLATAM() {
  var hsp = document.getElementById("toggleHSP");
  var latam = document.getElementById("toggleLATAM");
  var mlb = document.getElementById("toggleMLB");

  if (latam.style.display !== "block") {
    latam.style.display = "block";
    hsp.style.display = "none";
    mlb.style.display = "none";
  }
}

function myFunctionMLB() {
  var hsp = document.getElementById("toggleHSP");
  var latam = document.getElementById("toggleLATAM");
  var mlb = document.getElementById("toggleMLB");

  if (mlb.style.display !== "block") {
    mlb.style.display = "block";
    latam.style.display = "none";
    hsp.style.display = "none";
  }

}

#header {
  width: 400px;
  display: inline-block;
  margin: 10px;
  margin-left: 50px;
  margin-right: 50px;
  text-align: center;
}

#toggleHSP {
  widht: 400px;
  height: 400px;
  border-color: red;
  display: none;
}

#toggleLATAM {
  widht: 400px;
  height: 400px;
  border-color: red;
  display: none;
}

#toggleMLB {
  widht: 400px;
  height: 400px;
  border-color: red;
  display: none;
}

.division {
  background-color: white;
  border-width: 0px;
  min-width: 100px;
  min-height: 50px;
}

.division:hover {
  background-color: blue;
  color: white;
}

<html>

<head>
  <title>Page Title</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>

  <div id="header"> <button class="division" id="hsp"> HSP </button>
    <button active class="division" id="cross"> LATAM </button>
    <button class="division" id="mlb"> MLB </button></div>

  <div id="toggleHSP">
    TEST HSP
  </div>

  <div id="toggleLATAM">
    TEST LATAM
  </div>

  <div id="toggleMLB">
    TEST MLB
  </div>

  <div> Test info bar </div>

</body>

</html>

【讨论】：

= -> 赋值，== 或 === -> 比较