HTML/Javascript message wont persist from dynamic form input/display

Working on learning JavaScript. I am working on creating a dynamic form and displaying the output. Below is a simple example. If I step through the script using the debugger tools: a)the form loads, b) the form takes an input c) the message displays d) the message disappears. I can't figure out how to get the message to persist. Thanks in advance for any help.

JavaScript

function displayQuestions() { 

    var down = document.getElementById("displayQuestionsDown"); 
                
    // Create a break line element 
    var br = document.createElement("br"); 
                
    // Create a form Dynamically 
    var form = document.createElement("form");
    form.setAttribute("id", "myForm");  

    // Create an input element for Your Name 
    var yourName = document.createElement("input"); 
    yourName.setAttribute("type", "text"); 
    yourName.setAttribute("name", "yourName"); 
    yourName.setAttribute("id", "yourName");
    yourName.setAttribute("placeholder", "Your Name"); 

                // create a submit button 
                var s = document.createElement("input"); 
                s.setAttribute("type", "submit"); 
                s.setAttribute("value", "Submit"); 
                s.setAttribute("onclick", "showStory()");
                
    
                // Append the Your Name to the form 
                form.appendChild(yourName); 
                form.appendChild(br.cloneNode()); 

                // Append the submit button to the form 
                form.appendChild(s);                

                document.getElementsByTagName("p")[1] 
            .appendChild(form); 
} 

function showStory() {
    let yourName = document.getElementById("yourName").value;


    document.getElementById("display2").innerHTML = `Hello ${yourName}`;

    // empty the form's values
    document.getElementById("myForm").reset();

    // hide the questions
    document.getElementById("myForm").style.display = 'none';

}

function newForm() {
        location.reload();
}

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Replace this with your own information -->
    <meta name="author" content="" />
    <title>Dynamic Form</title>
    <script src="Dynamic_form.js" defer></script>
    <link rel="stylesheet" href="Dynamic_style.css" type="text/css">

</head>

<body>
    <div class="container">
        <h1>Dynamic Form</h1>
        <div>
        <p> 
        Click on the button to create 
        a Dynamic Form
        </p> 
        <button onClick="displayQuestions()"> 
            Generate 
        </button> 
        <p id="DisplayQuestionsDown"></p>
        </div>
        <div class="displayMessage">

            <h3 id="display1"></h3>
            <p id="display2"></p>           
        </div>

        <div>
            <button type="submit" class="new-btn" id="new-btn" onclick="newForm()" >Generate Again?</button>
        </div>  

    </div>
</body>

</html>

CSS

.container {
  padding-top: 50px;
  max-width: 300px;
}

input {
    font-size: 120%; margin-left; 20px; width: 290px; margin-bottom: 10px;
}


input[type=submit] {
    border: 3px outset #444; float: center; background-color: #FFC;
}

button[type=submit] {
    border: 3px outset #444; float: center; background-color: #F00;
}

button {
    font-size: 120%; margin-left; 20px; width: 290px; margin-bottom: 10px;
}

div {margin: 20px 0px 100px 10px; }

Solution

try prevent form from being submitted


var form = document.createElement("form");
    form.setAttribute("id", "myForm");
    form.setAttribute("onsubmit", 'event.preventDefault();')