Hide/Show Elements and Change Button
Question
I would like to have a button that, when clicked, hides one element and shows another, and to have the button change text when clicked (I think I got this part). Also, I'd like to only display one of the elements upon loading the page, and when the button is clicked, to only display the other element. The code I am using currently almost accomplishes this correctly, but upon clicking the button, the hidden element is displayed (desired) but the other element that was displayed is not hidden. Here is my code (I am using basic JS, I don't want to use jQuery).
The 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>
and the 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';
}
}
1 answers
solution1
1 ACCPTED 2019-06-12 01:38:02
You also need to toggle your email input embox
function emph() { // get the clock var myPhone = document.getElementById('phbox'); var myEmail = document.getElementById('embox'); // 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'; myEmail.style.display = 'block'; // change button text switchbtn.innerHTML = 'Use Phone'; } else { // clock is hidden. show it myPhone.style.display = 'block'; myEmail.style.display = 'none'; // change button text switchbtn.innerHTML = 'Use Email'; } }
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.