0

私は次のHTMLを持っています:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>

<body>

<input id="t1" type="text">

<script type="text/javascript">

function myfunction() {
    var no=document.getElementById("t1").value;

    if(no==""||isNaN(no))
    {
        alert("Not Numeric");
    }
    else {
        for ( var int = 0; int < no; int++) {
            for ( var int2 = 0; int2 <=int; int2++) {
                document.write("*");
            }
            document.write("<br>");
        }
    }
}

</script>

<button type="button" onclick="myfunction()" >click me</button> 

</body>
</html>

上記のコードは、値を入力した後、次のような出力を示しています: 5

*
**
***
****
*****

しかし、以下のように変更した後、上記の出力が得られません。

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>

<body>

<input id="t1" type="text">

<script>

function myfunction() {
    var no=document.getElementById("t1").value;

    if(no==""||isNaN(no))
    {
        alert("Not Numeric");
    }
    else {
        for ( var int = 0; int < no; int++) {
            for ( var int2 = 0; int2 <=int; int2++) {
                document.getElementById("demo").innerHTML="*";
            }
            document.getElementById("demo").innerHTML="<br>";
        }
    }
}

</script>


<button type="button" onclick="myfunction()" >click me</button>

<p id="demo">A Paragraph.</p>

</body>
</html>

出力を表示している間、別のまたは新しいhtmlページに表示されないように、内部htmlを使用して上記の出力が必要です。

4

6 に答える 6

1

要素 innerHTML に追加する+=代わりに使用する必要があります。そうしないと、それをオーバーライドするだけです。=

jsfiddle

JavaScript

...
document.getElementById("demo").innerHTML+="*";
}
document.getElementById("demo").innerHTML+="<br>";
...
于 2013-08-29T04:05:14.083 に答える
0

document.writeテキストを DOM に追加します。innerHTML指定された DOM 要素のコンテンツを設定するため、設定innerHTMLによってアスタリスクが追加されることはありません。

その代わり：

for (var int = 0; int < no; int++) {
    for (var int2 = 0; int2 <=int; int2++) {
        document.getElementById("demo").innerHTML+="*";
    }
    document.getElementById("demo").innerHTML+="<br>";
}

一般に、 を使用したい場合document.writeは、通常、より良い方法があります。この質問を参照してください。

于 2013-08-29T04:03:28.350 に答える
0

以下のコードは、作成されたすべての * をクリアしています。innerHTML は demo の完全なコンテンツを置き換えるためです。したがって
、 for ループで取得した結果と連結します

 document.getElementById("demo").innerHTML="<br>";
于 2013-08-29T04:04:09.120 に答える
0

あなたのコードは期待通りに動作しています。あなたが知る必要があるのは、その違いと、いつあなたとあなたdocument.writeにinnerHTML

document.write: HTML 式または JavaScript コードをドキュメントに書き込みます。

innerHTML:プロパティは、要素の内部 HTML を設定または返します。

innerHTMLとdocument.writeは、コンテンツを動的に変更/挿入するための方法と実際には比較できません。これらの使用法は異なり、目的も異なるためです。

于 2013-08-29T04:05:25.900 に答える