Question

我在学校学习软件工程而不是全新的，但仍然是该领域的学生，需要学习很多东西，并且想知道是否有人可以告诉我，我是否只是犯了新手的错误。我在我的html和JavaScript类中做了一个家庭作业，以创建一个页面，有人可以在那里输入名称，年龄并通过JavaScript提示背景颜色变化。我能够完成任务，但在提醒后告诉你你的名字，年龄和背景变成什么颜色（此时背景是你输入的颜色）它会重置表格/页面。我不知道为什么会这样做，我的课堂上也没有其他人所以我想知道是否有人能告诉我它为什么会重置，以及我是否在代码中做了些什么以便我将来可以留意它

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="navContainer"></div>
  <div id="revNavContainer"></div>
</body>
</html>

Answer 1

这是因为当您点击表单中的Submit按钮时，会提交表单。由于（根据您的代码我可以告诉您）您不想实际提交表单，因此您只需删除<form></form>标记。

考虑以下修订：

<!DOCTYPE html>    
<html>
    <head>
    <script>
        function getInformation() {
            var strColor = prompt("What is your favorite color");
            var strFirstName = document.getElementById("txtName").value; 
            var strYourAge = document.getElementById("txtAge").value;
            document.body.style.backgroundColor= strColor;    
            alert(strFirstName + "Your favorite background color was applied to the backgrond of the page. \n\n and your age is" + strYourAge);     
        }
    </script>
    </head>
    <body>
      <!-- <form> was removed -->
        <table>
            <tr>
                <td><label>First Name</label>
            </tr>
            <tr>
                <td><input id="txtName" type="text" name="Name" required></td>
            </tr>
            <tr>
                <td><label>Your Age</label></td>
            </tr>
            <tr>
                <td><input id="txtAge" type="number" name="Age" required></td>
            </tr>
            <tr>
                <td><button onclick="getInformation()">Submit</button></td>
            </tr>
        </table>
    </body>
</html>

注意：

如果您想了解有关form标记的更多信息，请随时阅读更多相关信息here。

form代码应该包含：

action - 您要将表单数据发送到的位置。

method - 您希望如何发送该数据。

考虑这个例子：

<form action="demo_form.asp" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> </form>

Answer 2

添加type =＆＃34;按钮＆＃34;到这一行，实现无刷新。

<td><button type="button" onclick="getInformation()">Submit</button></td>

参考此问题以获取更多信息：

prevent refresh of page when button inside form clicked

Answer 3

大家好，谢谢大家的帮助！我尝试了两种方式，最终选择了Pete R.带有类型按钮如果我确实需要这种形式，我仍然会处于相同的困境中。使用类型按钮，我仍然可以保留表单以供以后修改，而不会出现刷新问题。

致尼克Z我很欣赏这些信息的链接，并且肯定会使用它。我现在还不熟悉这个领域，我一直在寻找有用的信息来帮助我。

再次感谢大家的帮助！

为什么要重置表单/页面？

3 个答案: