我试图让我的内容与我的按钮显示在同一页面上。但是当我输入值并按下显示时,我正在形成的正方形显示在一个新的白色网页上。
我要求用户输入两个值(高度和宽度),我还要求输入一个字符来形成正方形的边框,但我还不能完成那部分,所以我只是硬编码了一个 # 字符同时边界
我想知道的是如何在同一页面上而不是在单独的页面上显示我的正方形。
我使用外部 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 +="  ";
}
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:  <input type = "text" id = "value1">
</td>
</tr>
<tr>
<td>
Please Enter value number 2:  <input type = "text" id = "value2">
</td>
</tr>
<tr>
<td>
Please Enter a character:         <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 开发还是新手这一事实,所以我的代码显然非常基础。如果您需要我的更多信息,请告诉我。