gpt4 book ai didi

javascript - 有没有办法在单击按钮后在同一页面上显示内容?

转载 作者:行者123 更新时间:2023-12-02 18:41:48 27 4
gpt4 key购买 nike

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

我要求用户输入两个值(高度和宽度),我还要求一个字符来形成正方形的边框,但我还无法完成该部分,所以我只是硬编码了一个 # 字符在此期间前往边境

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

我使用外部 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>

任何有用的提示将不胜感激,请考虑我对网络开发仍然是新手的事实,因此我的代码显然非常基础。如果您需要我提供更多信息,请告诉我。

最佳答案

方式document.write()其工作原理是,当在 HTML 页面外部调用它时,它会自动创建一个新文档并写入该文档(请参阅 documentation )。这就是您的情况所发生的情况:该函数在 HTML 之外(在 SquareScript.js 中)被调用,因此它正在创建一个新文档,这就是您所看到的“新的白色网页”。

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

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

var outputText = "";

然后,当您执行循环时,您可以添加到 outputText :

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

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

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

关于javascript - 有没有办法在单击按钮后在同一页面上显示内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16772583/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com