Как сделать два тега <button>, где один вызывает текст, а другой удаляет текст?

Question

У меня есть два тега <button>, например:

<button id="functionyes" onclick="functionYes()">Yes</button>

<button id="functionno" onclick="functionNo()">No</button>

Они связаны с такими функциями:

function functionNo() {
    var x = document.getElementById("functionyes");
    if (x.style.display === "none") {
        x.style.display = "block";
        document.getElementById("functionno").disabled = true;
    } else {
        x.style.display = "none";
        document.getElementById("functionno").disabled = false;
    }
}

function functionYes() {
    var x = document.getElementById("functionno");
    if (x.style.display === "none") {
        x.style.display = "block";
        document.getElementById("functionyes").disabled = true;
    } else {
        x.style.display = "none";
        document.getElementById("functionyes").disabled = false;
    }
}

Эти функции переключают <div>, например, с видимого на невидимое:

<div style="display:none" id="functionYes">
    Yes
  </div>

<div style="display:none" id="functionNo">
    No
 </div>

Итак, когда вы нажимаете, скажем, кнопку «Да», запускается функция, которая показывает «Да».текст.Затем функция отключает кнопку «Нет», пока вы не отключите текст «Да».Это то же самое, что и наоборот.

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

Answer 1

Рассмотрите возможность использования jQuery , это делает такие вещи очень простыми:

<button id="yes">Yes</button>
<button id="no">No</button>

<div id="yes-div">Yes</div>
<div id="no-div">No</div>

<script>
    $('#yes').click( () => {
        $('#yes-div').show();
        $('#no-div').hide();
    });
    $('#no').click( () => {
        $('#no-div').show();
        $('#yes-div').hide();
    });
</script>

Answer 2

упростите ваш код, просто передайте то, что вы хотите показать, и то, что вы хотите скрыть.

function showHide(show, hide) {
  document.getElementById(show).style.display = "block"
  document.getElementById(hide).style.display = "none"
}

<button onclick="showHide('yes', 'no')">Yes</button>
<button onclick="showHide('no', 'yes')">No</button>

<div id="yes" style="display:none">Yes</div>
<div id="no" style="display:none">No</div>