Почему моя функция onclick работает только после первого щелчка?

Question

Я пытаюсь скрыть одну кнопку, а кнопку, которая уже скрыта, заменить на месте другой кнопки. Моя проблема заключается в том, что, хотя мой код работает, первый щелчок не работает, и он меняет другие мои функции и отбрасывает все.

Я обнаружил ту же проблему на quora, где ответ заключался в том, чтобы не предполагать, что отображение начинается как " блок ». После того, как я назначил и «первый», и «второй» дисплеи, у него возникла та же проблема, что он работает только после первого щелчка.

My html is:

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

My css это:

#first {
    display: block;
    font-size: 48px;
    position: relative;
    left: 20%;
    top: -25px;
    text-decoration: none;
    background-color: white;
    border: 1px solid black;
    float: left;
    margin-left: 27.5%;
}

#second {
    display: none;
    font-size: 48px;
    position: relative;
    left: 20%;
    top: -25px;
    text-decoration: none;
    background-color: white;
    border: 1px solid black;
    float: left;
    margin-left: 27.5%;
}

Мой 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";
    }
}

Answer 1

Причина в том, что ваши a.style.display и b.style.display возвращают пустую строку, прежде чем вы что-нибудь щелкнете.

Почему?

element.style не всегда возвращает фактическое свойство стиля. Чтобы проверить текущее значение style для элемента, есть метод window.getComputedStyle():

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

Я бы не рекомендовал этот подход. Будет проще хранить данные в переменных вместо logi c в DOM.

Answer 2

У вас просто есть ваш лог c в обратном направлении.

Попробуйте это:

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";
  }
}

То, как вы установили значения по умолчанию display, сделало так, что первый вызов вашего функция просто установила дисплеи на то, что они уже были.

Answer 3

Ваши элементы не имеют свойства style, поэтому в первый раз 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";
}