javascript open（）方法冲突

我是js的新手。 我试图获取

文本框的值，并显示在新页面中。
但不知怎的，当我点击按钮时，它会显示一秒钟的值，然后重定向到同一个表单页面。
请告诉我哪里做错了？谢谢
这是我的密码

HTML

<div id="myDiv">
    <strong>Enter your name in the box below, then click
        the button to see a personalized page!</strong>
        <br>
        <form id="newp" onsubmit="newpage();">
            Name: <input type="text" id="yourname" size="25">
            <br><br>
            <input type="submit"   onclick="pressedbutton()" value="Submit">
        </form>
        <script type="text/javascript" src="main.js"></script>
    </div>


在下面的框中输入您的姓名，然后单击
点击按钮查看个性化页面


姓名：




JS

    function pressedbutton()
{
    var thename = document.getElementById("yourname").value;
    document.open();
    document.write("<h1>Welcome!</h1>");
    document.write("Hello, " + thename + ", and welcome to my page!");
    document.close();

}

功能按下按钮（）
{
var thename=document.getElementById（“yourname”）.value；
document.open（）；
写下“欢迎！”；
写下“你好，+thename+”，欢迎来到我的页面！”；
document.close（）；
}

谢谢。
当您在已加载的文档上调用
document.open（）
然后调用
document.write（）
时，它将清除当前文档并将其替换为新的空文档

如果您只想向当前文档添加一些内容，那么应该使用DOM操作。创建新元素并将其添加到当前文档中

例如，您可以这样做：

function pressedbutton() {
    var thename = document.getElementById("yourname").value;
    var div = document.createElement("div");
    div.innerHTML = "<h1>Welcome!</h1>Hello, " + thename + ", and welcome to my page!";
    document.body.appendChild(div);

    // prevent form submission
    return false;
}

功能按下按钮（）{
var thename=document.getElementById（“yourname”）.value；
var div=document.createElement（“div”）；
div.innerHTML=“欢迎！您好，“+thename+”，欢迎来到我的页面！”；
文件.正文.附件（div）；
//防止表格提交
返回false；
}


此外，表单正在提交回服务器，这将导致页面重新加载。您可以通过将按钮更改为常规按钮（而不是提交按钮）或防止提交按钮的默认行为来防止这种情况

如果您不打算提交表单，只需从以下位置更改按钮：

<input type="submit"   onclick="pressedbutton()" value="Submit">



为此：

<input type="button" onclick="pressedbutton()" value="Submit">

在已加载的文档上调用
document.open（）
然后调用
document.write（）
时，它将清除当前文档并用新的空文档替换

如果您只想向当前文档添加一些内容，那么应该使用DOM操作。创建新元素并将其添加到当前文档中

例如，您可以这样做：

function pressedbutton() {
    var thename = document.getElementById("yourname").value;
    var div = document.createElement("div");
    div.innerHTML = "<h1>Welcome!</h1>Hello, " + thename + ", and welcome to my page!";
    document.body.appendChild(div);

    // prevent form submission
    return false;
}

功能按下按钮（）{
var thename=document.getElementById（“yourname”）.value；
var div=document.createElement（“div”）；
div.innerHTML=“欢迎！您好，“+thename+”，欢迎来到我的页面！”；
文件.正文.附件（div）；
//防止表格提交
返回false；
}


此外，表单正在提交回服务器，这将导致页面重新加载。您可以通过将按钮更改为常规按钮（而不是提交按钮）或防止提交按钮的默认行为来防止这种情况

如果您不打算提交表单，只需从以下位置更改按钮：

<input type="submit"   onclick="pressedbutton()" value="Submit">



为此：

<input type="button" onclick="pressedbutton()" value="Submit">



请告诉我哪里做错了

您没有阻止提交事件的默认操作。提交表单时，浏览器将加载
操作
中定义的URL，如果没有提供，则重新加载页面

如果你不想让浏览器这样做，你必须阻止它。有几种方法可以做到这一点

您可以
返回false：

onsubmit="return pressedbutton()"

及

或者，您可以调用事件对象的

 onsubmit="pressedbutton(event)"

及


查看以了解有关事件处理的更多信息。它还描述了浏览器之间的差异

请告诉我哪里做错了

您没有阻止提交事件的默认操作。提交表单时，浏览器将加载
操作
中定义的URL，如果没有提供，则重新加载页面

如果你不想让浏览器这样做，你必须阻止它。有几种方法可以做到这一点

您可以
返回false：

onsubmit="return pressedbutton()"

及

或者，您可以调用事件对象的

 onsubmit="pressedbutton(event)"

及


查看以了解有关事件处理的更多信息。它还描述了浏览器之间的差异。
我发现您的代码存在一些问题。对我来说最突出的是：

document.open();
    document.write("<h1>Welcome!</h1>");
    document.write("Hello, " + thename + ", and welcome to my page!");
    document.close();

这将使所有内容保持在适当的位置，但实际上会加载一个新页面。
在有url的页面上，您可以使用相同的document.write（）脚本（我不推荐使用此脚本），也可以在该页面上使用预设HTML，以实现您要实现的目标，我认为这是更好的方法

还有，这让我有点烦：

改变

</form>
        <script type="text/javascript" src="main.js"></script>
    </div>

在Page2.html（同一文件夹）中，放置与您的代码（在javascript中）类似的代码：


var div=document.createElement（“div”）；
div.innerHTML=“`Welcome！`Hello，”+
localStorage.getItem（“名称”）+
“，欢迎来到我的页面！”；
文件.正文.附件（div）；
我发现您的代码存在一些问题。对我来说最突出的是：

document.open();
    document.write("<h1>Welcome!</h1>");
    document.write("Hello, " + thename + ", and welcome to my page!");
    document.close();

这将使所有内容保持在适当的位置，但实际上会加载一个新页面。
在有url的页面上，您可以使用相同的document.write（）脚本（我不推荐使用此脚本），也可以在该页面上使用预设HTML，以实现您要实现的目标，我认为这是更好的方法

还有，这让我有点烦：

改变

</form>
        <script type="text/javascript" src="main.js"></script>
    </div>

在Page2.html（同一文件夹）中，放置与您的代码（在javascript中）类似的代码：


var div=document.createElement（“div”）；
div.innerHTML=“`Welcome！`Hello，”+
localStorage.getItem（“名称”）+
“，欢迎来到我的页面！”；
文件.正文.附件（div）；
如何使用要在新页面中显示的数据？？如新的html文件？有多种方法，这取决于您可以使用哪些工具（例如服务器端语言）。总的来说，它真的很差