Javascript 为什么我的onclick函数只在第一次单击后才起作用？

我试图使一个按钮隐藏和按钮，已经被隐藏替换的地方，另一个按钮。我的问题是，虽然我的代码可以工作，但第一次单击就不起作用，它会更改我的其他函数，并将所有内容都丢弃

我在quora上发现了同样的问题，答案是不假设显示以块开始。在我指定了“first”（第一）和“second”（第二）显示之后，它有一个相同的问题，即只在第一次单击后工作

我的html是：

        <button onclick="switchSearch();switchType();" id="switch">Switch to zip</button>
        <button id="first">Submit</button>
        <button id="second">Submit2</button>

我的Javascript是：

function switchSearch() {
    let a = document.querySelector('#first');
    let b = document.querySelector('#second');
    if (b.style.display === "none") {
        b.style.display = "block";
        a.style.display = "none";
    } else {
        b.style.display = "none";
        a.style.display = "block";
    }
}

---

您的元素没有样式属性，因此第一次b.style.display实际上是未定义的。一个简单的解决方法是：

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

---

您的元素没有样式属性，因此第一次b.style.display实际上是未定义的。一个简单的解决方法是：

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

原因是a.style.display和b.style.display在单击任何内容之前返回一个空字符串

为什么?

element.style并不总是返回实际的样式属性。要检查元素的当前样式值，可以使用window.getComputedStyle方法：

if (window.getComputedStyle(b).display === "none") {/* ... */}

但我不推荐这种方法。将数据保存在变量中而不是将逻辑保存在DOM中更为简洁。

原因是a.style.display和b.style.display在单击任何内容之前返回一个空字符串

为什么?

element.style并不总是返回实际的样式属性。要检查元素的当前样式值，可以使用window.getComputedStyle方法：

if (window.getComputedStyle(b).display === "none") {/* ... */}

---

但我不推荐这种方法。将数据保存在变量中比将逻辑保存在DOM中更干净。

只需将逻辑向后

试试这个：

function switchSearch() {
  let a = document.querySelector("#first");
  let b = document.querySelector("#second");
  if (a.style.display === "none") {
    b.style.display = "none";
    a.style.display = "block";
  } else {
    b.style.display = "block";
    a.style.display = "none";
  }
}

---

设置默认显示值的方式使得第一次调用函数时只需将显示设置为原来的状态。

您只需将逻辑向后

试试这个：

function switchSearch() {
  let a = document.querySelector("#first");
  let b = document.querySelector("#second");
  if (a.style.display === "none") {
    b.style.display = "none";
    a.style.display = "block";
  } else {
    b.style.display = "block";
    a.style.display = "none";
  }
}

您设置默认显示值的方式使得第一次调用函数时只需将显示设置为原来的状态