Fatal编程技术网
  • javascript/
  • Javascript 有没有办法在点击按钮后在同一页面上显示内容？

Javascript 有没有办法在点击按钮后在同一页面上显示内容？

javascript html

Javascript 有没有办法在点击按钮后在同一页面上显示内容？,javascript,html,Javascript,Html,我正试图让我的内容显示在与按钮相同的页面上。但当我输入值并按display时，我正在形成的正方形会显示在一个新的白色网页上 我要求用户输入两个值（高度和宽度），我还要求输入一个字符来形成正方形的边框，但我还不能完成这一部分，所以我只是同时硬编码了一个#字符作为边框 我想知道的是如何在同一页上显示我的方块，而不是在单独的页面上 我使用一个外部JavaScript文件：下面是它的代码。其名称为“SquareScript.js”： 函数显示（） { var a=document.getElementB

我正试图让我的内容显示在与按钮相同的页面上。但当我输入值并按display时，我正在形成的正方形会显示在一个新的白色网页上

我要求用户输入两个值（高度和宽度），我还要求输入一个字符来形成正方形的边框，但我还不能完成这一部分，所以我只是同时硬编码了一个#字符作为边框

我想知道的是如何在同一页上显示我的方块，而不是在单独的页面上

我使用一个外部JavaScript文件：下面是它的代码。其名称为“SquareScript.js”：

函数显示（）
{
var a=document.getElementById（“value1”）.value；
var b=document.getElementById（“value2”）.value；
var outputText=“”；
对于（变量i=0；i”；
对于（var r=0；r”；
}
对于（变量i=0；i
这是我的网页代码：

<!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>


表{背景色：白色；颜色：黑色；}
正文{背景图像：url（'squares.png'）；}
欢迎建造一个广场
请输入数值1:
请输入数值2:
请输入一个字符：nbsp  
展示
document.getElementById（“output”）.innerHTML（outputText）；
<>任何有用的提示都会被赏识，请考虑我对Web开发还是新的，所以我的代码显然是非常基础的。如果你还需要我什么，请告诉我

不要使用
文档。编写
。在页面上创建
，并将输出放在那里。您应该创建一个包含HTML输出的字符串变量。然后可以使用以下代码显示此HTML：


document.getElementById("result").innerHTML = my_html_output;



document.write（）
的工作方式是，当在HTML页面之外调用它时，它会自动创建一个新文档并写入其中（请参阅）。在您的案例中就是这样：函数在HTML之外被调用（在SquareScript.js中），因此它正在生成一个新文档，这就是您看到的“新的白色网页”

您可以通过在HTML页面中调用
document.write（）
来解决此问题。或者您可以放弃使用
document.write（）
，而是引用现有页面上的元素（更灵活的解决方案）。通过在HTML中创建一个新元素，其中函数的输出应该出现（如
），您可以使用
document.getElementById（“output”）
将脚本的输出放入该元素中

您不必每次添加内容时都调用此函数。相反，创建一个新变量来保存生成的输出文本


var outputText = "";


然后，当您遍历循环时，您可以将以下内容添加到
outputText
：


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



那么我将在for循环中执行此操作？当我试图显示#？Add
var my#u html_输出时到函数的开头，并替换任何
文档。用
my\u html\u output+=something编写（something）
。所以我将在for循环中pu这个：document.getElementById（“输出”）.innerHTML（“#”）中@AndreSmith：只要先在HTML中添加一个带有
id=“output”
的元素，就可以了。例如，您可以添加
或
。我已经修改了我的代码，以便按照您所说的方式进行操作。但事实并非如此working@AndreSmith不要用
document.getElementById（“output”）.innerHTML（“#”）替换每个
document.write（）
，而是将所有输出内容添加到一个保持变量中，并将其内容插入脚本末尾的HTML中。有关详细信息，请参见我的更新答案。@AndreSmith您应该将插入内容的代码放在SquareScript.js中
Display（）
函数的末尾，而不是放在
本身中。

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



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