printing using document.getElementById("demo").innerHTML

Question

I have the following 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>

The above code is showing output like this after entering the value: 5

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

But I am not getting the above output after I modified as below:

<!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>

I just want the above output using inner html so that while showing output it will not display in another or new html page.

use `+=` operator instead of `=` in `document.getElementById("demo").innerHTML=` — fardjad, Aug 29 '13 at 03:59

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

You should use += instead of = to append to an elements innerHTML, else you're just overriding it.

jsfiddle

JavaScript

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 29 '13 at 04:05

thgaskell

11,608
5
30
36

Steve · Accepted Answer · 2013-08-29T04:17:50.120

The problem is that you overwrite the contents of the demo element every time you use innerHTML. For example,

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

outputs only "World". To actually output "Hello World", you would have to concatenate the contents of the element with what's already there:

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

or shortened:

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

However, accessing the DOM by using document.getElementById("demo") over and over again is very costly. To avoid this, I would suggest you keep track of your output in a temporary variable and then output it into the DOM element at the end, as such:

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;
    }
}

score 0 · Answer 3 · edited May 23 '17 at 12:24

document.write will append the text to the DOM. innerHTML sets the content of the given DOM element, so setting innerHTML will not append additional asterisks.

Instead:

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

In general, when you feel like using document.write, there is usually a better way. See this question.

score 0 · Answer 4 · answered Aug 29 '13 at 04:04

0

Below code is clearing off all the * that is created. Because innerHTML would replace complete contents of demo. Hence concatenate
with results got in for loop

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

answered Aug 29 '13 at 04:04

Raghav

5,039
3
15
28

This is only partially correct... Even inside the loop, the OP's code is already overwriting the contents every time. – Steve Aug 29 '13 at 04:19

score 0 · Answer 5 · edited May 23 '17 at 12:24

Your code is working as expected. what you need to know is the difference and when to you document.write and innerHTML

document.write: writes HTML expressions or JavaScript code to a document.

innerHTML: property sets or returns the inner HTML of an element.

innerHTML and document.write are not really comparable methods to dynamically change/insert content, since their usage is different and for different purposes.

score 0 · Answer 6 · answered Aug 29 '13 at 04:34

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>

printing using document.getElementById("demo").innerHTML

6 Answers6

JavaScript