HTML/Javascript 消息不会从动态表单持续存在 input/display

Question

正在学习 JavaScript。我正在创建一个动态表单并显示输出。下面是一个简单的例子。如果我使用调试器工具单步执行脚本：a) 加载表单，b) 表单接受输入 c) 显示消息 d) 消息消失。我不知道如何让消息持续存在。在此先感谢您的帮助。

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; }

Answer 1

尝试阻止提交表单


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

HTML/Javascript 消息不会从动态表单持续存在 input/display

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

html

javascript

dynamicform