Отдельная кнопка Показать / Скрыть javascript

Question

Я пытаюсь иметь 2 отдельные кнопки, чтобы при нажатии первой кнопки под ней отображался div, а затем, когда нажимается другая кнопка, появляется другой div, заменяющий / скрывающий первый div, который вышел, когда была нажата первая кнопка.

Html:

                                              <!-- Pre-Determined Button -->
            <span class="tooltip">
                   <button style="border-top-right-radius: 13px; border-bottom-left-radius: 13px;border-bottom-right-radius: 20px;border-top-left-radius: 20px;" id="predetermine" onclick="javascript:predetermine();">Pre-Determined</button>
            </span>

                                                 <!-- Auction Button -->
            <span class="tooltip">
                    <button style="border-top-right-radius: 20px; border-bottom-left-radius: 20px;border-bottom-right-radius: 13px;border-top-left-radius: 13px;" id="auction" onclick="javascript:auction(); ">Auction</button>
            </span>
                
            </div>
            <br>
            
            <!-- Username Entry -->
            <div class="username-entry" id="predetermineclick" style="visibility:hidden">
                <label> Enter Username: </label>
                <input  class= "joe" type="text" id="uName" name="UserName">
            </div>
            
            <!-- Create code button -->
            <div class="create" id="auctionclick" style="visibility:hidden">
                <button class="button">Create Link</button>
            </div>

Для моего javascript я просто написал 2 отдельные функции, но, как вы можете видеть на изображениях, ссылка «создать» "кнопка находится в нижней части поля для имени пользователя. Я знаю, что есть способ объединить эти две функции и сделать код более чистым.

Java script:

function predetermine() {
if (document.getElementById('predetermine').onclick) {
    document.getElementById('predetermineclick').style.visibility='visible';
    document.getElementById('auctionclick').style.visibility='hidden';
}

function auction() {
if (document.getElementById('auction').onclick) { 
    document.getElementById('auctionclick').style.visibility='visible';
    document.getElementById('predetermineclick').style.visibility='hidden';
}

Я хочу, чтобы кнопка создания ссылки заменяла вводимое имя пользователя, когда

Answer 1

Используйте display: none, чтобы полностью удалить элемент со страницы.

function predetermine() {
  if (document.getElementById('predetermine').onclick) {
    document.getElementById('predetermineclick').style.display = 'block';
    document.getElementById('auctionclick').style.display = 'none';
  }
}

function auction() {
  if (document.getElementById('auction').onclick) {
    document.getElementById('auctionclick').style.display = 'block';
    document.getElementById('predetermineclick').style.display = 'none';
  }
}

<!-- Pre-Determined Button -->
<span class="tooltip">
  <button style="border-top-right-radius: 13px; border-bottom-left-radius: 13px;border-bottom-right-radius: 20px;border-top-left-radius: 20px;" id="predetermine" onclick="javascript:predetermine();">Pre-Determined</button>
</span>

<!-- Auction Button -->
<span class="tooltip">
  <button style="border-top-right-radius: 20px; border-bottom-left-radius: 20px;border-bottom-right-radius: 13px;border-top-left-radius: 13px;" id="auction" onclick="javascript:auction(); ">Auction</button>
</span>

<br>

<!-- Username Entry -->
<div class="username-entry" id="predetermineclick" style="display: none">
  <label> Enter Username: </label>
  <input class="joe" type="text" id="uName" name="UserName">
</div>

<!-- Create code button -->
<div class="create" id="auctionclick" style="display: none">
  <button class="button">Create Link</button>
</div>

Answer 2

Вы можете получить идентификатор нажатой кнопки, передав его в функции javascript. Попробуйте приведенный ниже фрагмент кода.

HTML:

<div>
    <!-- Pre-Determined Button -->
    <span class="tooltip">
        <button
            style="border-top-right-radius: 13px; border-bottom-left-radius: 13px;border-bottom-right-radius: 20px;border-top-left-radius: 20px;" id="predetermine" onclick="toggleState(this.id);">Pre-Determined</button>
    </span>

    <!-- Auction Button -->
    <span class="tooltip">
        <button
            style="border-top-right-radius: 20px; border-bottom-left-radius: 20px;border-bottom-right-radius: 13px;border-top-left-radius: 13px;" id="auction" onclick="toggleState(this.id); ">Auction</button>
    </span>

</div>
<br>

<!-- Username Entry -->
<div class="username-entry" id="predetermineclick" style="visibility:hidden">
    <label> Enter Username: </label>
    <input class="joe" type="text" id="uName" name="UserName">
</div>

<!-- Create code button -->
<div class="create" id="auctionclick" style="visibility:hidden">
    <button class="button">Create Link</button>
</div>

Javascript:

function toggleState(clickedButtonId) {
    const predetermineClick = document.getElementById('predetermineclick');
    const auctionClick = document.getElementById('auctionclick');
    
    if(clickedButtonId === 'predetermine') {
        predetermineClick.style.visibility='visible';
        auctionClick.style.visibility='hidden';
    } else {
        auctionClick.style.visibility='visible';
        predetermineClick.style.visibility='hidden';
    }
}

Другой способ сделать это - вместо этого передать сам элемент своего идентификатора. Чтобы это работало, измените toggleState(this.id); на toggleState(this); в обоих местах приведенного выше кода HTML.

Затем получите идентификатор сработавшего элемента, как мы это сделали в приведенном ниже коде.

function toggleState(clickedButton) {
    const clickedButtonId = clickedButton.id;

    const predetermineStyle = document.getElementById('predetermineclick').style;
    const auctionStyle = document.getElementById('auctionclick').style;
    
    if(clickedButtonId === 'predetermine') {
        predetermineStyle.visibility = 'visible';
        auctionStyle.visibility = 'hidden';
    } else {
        auctionStyle.visibility = 'visible';
        predetermineStyle.visibility = 'hidden';
    }
}

Кроме того, я заметил, что в вашем коде HTML отсутствует элемент <div>, который, я уверен, у вас обязательно будет в вашем файле кода, но чтобы сделать этот ответ самодостаточным , Я взял на себя смелость добавить элемент <div> в начале.

Я бы предпочел удалить элемент вместо переключения его видимости, но я вижу, что @Janned уже обратился к этому в своем ответе , поэтому я не буду go в него входить.