Я хотел бы иметь кнопку, которая при нажатии скрывает один элемент и показывает другой, и чтобы кнопка меняла текст при нажатии (кажется, я получил эту часть). Кроме того, я хотел бы отображать только один из элементов при загрузке страницы и при нажатии кнопки отображать только другой элемент. Код, который я использую в настоящее время, почти выполняет это правильно, но при нажатии на кнопку скрытый элемент отображается (желательно), но другой отображаемый элемент не скрывается. Вот мой код (я использую базовый JS, я не хочу использовать jQuery).
HTML
<html>
<body>
<div>
<span>E-Mail or Phone<br>
</span>
<button onclick="emph()" id="emphbtn" type="button">Use Phone</button>
</div>
<div id="phbox" style="display: none;">
<label for="phone">Phone</label><input id="phone" type="tel" />
</div>
<div id="embox">
<label for="mail">E-Mail</label><input id="mail">
</div>
</body>
и JavaScript
function emph() {
// get the clock
var myPhone = document.getElementById('phbox');
// get the current value of the clock's display property
var displaySetting = myPhone.style.display;
// also get the clock button, so we can change what it says
var switchbtn = document.getElementById('emphbtn');
// now toggle the clock and the button text, depending on current state
if (displaySetting == 'block') {
// clock is visible. hide it
myPhone.style.display = 'none';
// change button text
switchbtn.innerHTML = 'Use Phone';
}
else {
// clock is hidden. show it
myPhone.style.display = 'block';
// change button text
switchbtn.innerHTML = 'Use Email';
}
}