Question

So I have a webpage that has a form. The form is linked to a switch statement, and depending on what the user inputs, it returns some value. However, after the value is returned, I want to provide an option to go back to the original form without refreshing the page. Since the javascript is all client side, the data is rendered in the div that I have specified, and I basically just want to refresh that area back to the original form via adding a button. In my switch statement, I have tried appendeding, style.display, and even writing a toggle function and it’s not working.

Here is my HTML and JS:

function verifyPres(form) {
var president = form.day.value.toUpperCase();

switch (president) {
    case "GEORGE WASHINGTON":
        document.getElementById("form").remove();
        document.getElementById("id1").textContent=george[0];
        document.getElementById("id2").textContent=george[1];
        document.getElementById("id3").textContent=george[2];
        document.getElementById("id4").textContent=george[3];
        document.getElementById("id5").textContent=george[4];
        document.getElementById("id6").textContent=george[5];
        document.getElementById("id7").textContent=george[6];
        document.getElementById("id8").textContent=george[7];
        break;
    case "JOHN ADAMS":
        document.getElementById("form").remove();
        document.getElementById("id1").textContent=adams[0];
        document.getElementById("id2").textContent=adams[1];
        break;
    default:
        document.getElementById("form").remove();
        document.getElementById("id1").textContent='Sorry, that is not a president!';
}

}

<div class="recipe">
                <form id="form" name="myForm">
                    <b>Please enter your favorite US President:</b><br>
                      <div id="input"><input type=TEXT value="" name="day" style="font-family: 'abraham_lincolnregular'; font-size: 1.2em; color: #544841;"></div>
                      <div id="return"></div>
                      <div id="ticket"><input class="button" type=BUTTON value="" name="myButton" onClick='verifyPres(this.form)'></div>
                </form>
                <h3 id="id1"></h3>
                <div id="list">
                    <div id="id2"><p></p></div>
                    <div id="id3"><p></p></div>
                    <div id="id4"><p></p></div>
                </div><!--list-->
                <div id="id5"><p></p></div>
                <div id="id6"><p></p></div>
                <div id="id7"><p></p></div>
                <div id="id8"><p></p></div>
            </div><!--recipe-->

Answer 1

Have you tried .reset()?

document.getElementById("form").reset();

I would highly suggest that, if these elements are going to be accessed and manipulated often, you cache them into variables, something along these lines:

var id1, id2, id3, id4, id5, id6, id7, id8;
id1 = document.getElementById("id1");
id2 = document.getElementById("id2");
// etc...

That way, they are ready for you to manipulate as often as you like, without having to force the DOM to find them each time.