javascript - 为什么需要点击才能应用我的功能？

Question

我正在尝试编写一个代码，当您单击按钮时它会显示，当再次按下时它会隐藏图像。我将图像显示设置为无，并且我希望在按下按钮时将其更改为阻止(以便显示图像)。

它可以工作，但仅当您单击两次时。 我该怎么做才能一键激活它？

HTML:

<button id="categoryBtn" onclick="insta()">instagram users</button>

JavaScript:

function insta() {
  var a = document.getElementById("instaBalas");

  if (a.style.display == "none") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}

Answer 1

因为当你第一次点击时显示的是空字符串。所以它然后设置为'none'并正常工作。您可以使用getCompulatedStyle

const img = document.getElementById("instaBalas")
function insta() {
  var a = window.getComputedStyle(img);

  if (a.display == "none") {
    img.style.display = "block";
  } else {
    img.style.display = "none";
  }
}

<button id="categoryBtn" onclick="insta()">instagram users</button><br>
<img alt="Imgage" id="instaBalas">

我建议上课并使用classList.toggle()

的另一种方法

const img = document.getElementById("instaBalas")
function insta() {
  img.classList.toggle('hidden')
}

.hidden{
  display:none;
}

<button id="categoryBtn" onclick="insta()">instagram users</button><br>
<img alt="Imgage" id="instaBalas">