0

ボタンと同じページにコンテンツを表示しようとしています。しかし、値を入力してディスプレイを押すと、形成している正方形が新しい白いWebページに表示されます。

ユーザーに 2 つの値 (高さと幅) を入力するように求め、正方形の境界を形成する文字も求めますが、まだその部分を実行できていないので、 # 文字をハードコーディングしましたその間に国境

私が知りたいのは、私の正方形を別のページではなく同じページに表示する方法です。

外部の 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 開発に慣れていないため、コードは明らかに非常に基本的なものです。私にもっと何か必要なことがあれば教えてください。

4

2 に答える 2