是否有一种方法来显示同一页上的内容后，一个按钮被点击

Is there a way to display content on same page after a button is clicked?

本文关键字：一个 按钮 一页 方法 一种 显示 是否      更新时间：2023-09-26

我想让我的内容显示在同一页面上作为我的按钮。但是当我输入值并按显示时，我正在形成的正方形显示在一个新的白色网页上。

我要求用户输入两个值(高度和宽度)，我还要求一个字符来形成正方形的边界，但我还不能做到这一点，所以我只是硬编码了一个#字符在边界的同时

我想知道的是如何显示我的广场在同一页，而不是在一个单独的页面。

我使用一个外部JavaScript文件:下面是它的代码。它被命名为"SquareScript.js":

function Display()
{
var a = document.getElementById("value1").value;
var b = document.getElementById("value2").value;
var outputText = "";
for (var i = 0; i < a; i++)
{
outputText += "#";
}
outputText +="<br>";
for (var r = 0; r < b; r++)
{
outputText += "#";

for(var p = 0; p < a-2; p++)
{
outputText +="&nbsp&nbsp";
}
outputText += "#";
outputText +="<br>";
}
for (var i = 0; i < a; i++)
{
outputText += "#";
}
}

这是我的网页代码:

<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" type = "text/css" href = "Assignment3.css">
        <style>
            table {background-color:white;color:black;}
            body {background-image: url('squares.png');}
        </style>
    </head>
    <body>
        <div class = "heading">
            <h1><img src = "Interested.png" width = 100px height = 100px></img>WELCOME TO BUILD A   SQUARE</h1>
        </div>
        <script src = "SquareScript.js">
        </script>
        <table>
            <tr>
                <td>
                    Please Enter value number 1:&nbsp&nbsp<input type = "text" id = "value1">
                </td>
            </tr>
            <tr>
                <td>
                    Please Enter value number 2:&nbsp&nbsp<input type = "text" id = "value2">
                </td>
            </tr>
            <tr>
                <td>
                    Please Enter a character:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type = "text"     id = "character"> 
                </td>
            </tr>
            <tr>
                <td>
                    <button onclick = "Display()">Display</button>
                </td>
            </tr>
    <div id="output" style = "background-color:blue;"><script>
     document.getElementById("output").innerHTML(outputText);
    </script></div>
 </table>
    </body>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
</html>

任何有用的提示将不胜感激，请考虑我仍然是新的web开发，所以我的代码显然是非常基本的事实。如果您还需要我做什么，请告诉我。

document.write()的工作方式是，当它在HTML页面外被调用时，它会自动创建一个新文档并写入其中(请参阅文档)。这就是在你的情况下发生的事情:这个函数在HTML之外被调用(在SquareScript.js中)，所以它正在创建一个新文档，这就是你所看到的"新的白色网页"。

您可以通过在HTML页面中调用document.write()来解决这个问题。或者您可以放弃使用document.write()，而是引用现有页面上的元素(更灵活的解决方案)。通过在应该显示函数输出的HTML中创建一个新元素(如<div id="output"></div>)，您可以使用document.getElementById("output")将脚本的输出放入该元素中。

你不需要每次想要添加内容时都调用这个。相反，在生成输出文本时，创建一个新变量来保存输出文本。

var outputText = "";

然后在循环中，你可以添加到outputText:

for (var i = 0; i < a; i++) {
    outputText += "#";
}

然后，在所有循环完成后，您可以通过将以下函数调用作为display()函数的最后一件事，将内容插入输出div中:

document.getElementById("output").innerHTML(outputText);

不要使用document.write。在您的页面上创建<div id="result"></div>并将您的输出放在那里。您应该创建一个包含HTML输出的字符串变量。然后，您可以使用以下代码显示此HTML:

document.getElementById("result").innerHTML = my_html_output;
相关文章：