Question

我有以下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页面中。

Answer 1

您应该使用+=而不是=附加到元素innerHTML，否则您只是覆盖它。

jsfiddle

的JavaScript

...
document.getElementById("demo").innerHTML+="*";
}
document.getElementById("demo").innerHTML+="<br>";
...

Answer 2

问题是每次使用demo时都会覆盖innerHTML元素的内容。例如，

document.getElementById("demo").innerHTML = "Hello ";    
document.getElementById("demo").innerHTML = "World";

仅输出“世界”。要实际输出“Hello World”，您必须将元素的内容与已存在的内容连接起来：

document.getElementById("demo").innerHTML = "Hello ";    
document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + "World";

或缩短：

document.getElementById("demo").innerHTML += "World";

但是，反复使用document.getElementById("demo")访问DOM非常昂贵。为避免这种情况，我建议您在临时变量中跟踪输出，然后将其输出到最后的DOM元素中，如下所示：

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

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

Answer 3

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时，通常会有更好的方法。请参阅this question。

Answer 4

以下代码清除了所有创建的*。因为innerHTML会取代demo的完整内容。因此，将结果连接到for循环

 document.getElementById("demo").innerHTML="<br>";

Answer 5

您的代码按预期工作。你需要知道的是difference and when to you document.write and innerHTML

document.write：将HTML表达式或JavaScript代码写入文档。

innerHTML：属性设置或返回元素的内部HTML。

innerHTML 和 document.write 并不是真正可比的方法动态更改/插入内容，因为它们的用法不同而且出于不同的目的。

Answer 6

设置innerHTML每次都会覆盖元素的整个内部HTML。但为什么要立即使用innerHTML？只需保留一个字符串，一次查询DOM，并减少浪费：

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Insert title here</title>
    </head>
    <body>
        <input id="t1" type="text">

        <button type="button" id="button">Click me</button>

        <pre id="demo">A placeholder!</pre>

        <script type="text/javascript">
            var size = parseInt(document.getElementById("t1").value, 10);

            if(!isNaN(size)) {
                var result = "";

                for(var i = 0; i < size; i++) {
                    for(var j = 0; j <= i; j++) {
                        result += "*";
                    }

                    result += "\n";
                }

                document.getElementById("demo").innerHTML = result;
            }
        </script>
    </body>
</html>

使用document.getElementById（“demo”）。innerHTML打印

6 个答案:

的JavaScript