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 回答
1

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;
    }
}
于 2013-08-29T04:11:49.393 回答
0

Setting innerHTML will overwrite the entire inner HTML of your element each time. But why use innerHTML immediately? Just keep one string, query the DOM once, and be less wasteful:

<!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>
于 2013-08-29T04:34:59.493 回答
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 回答