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.
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.
Share Improve this question edited Aug 29, 2013 at 4:04 Kev 120k53 gold badges305 silver badges391 bronze badges asked Aug 29, 2013 at 3:54 rajeevrajeev 4991 gold badge8 silver badges17 bronze badges 2- please remove unnecessary code. – Math chiller Commented Aug 29, 2013 at 3:58
-
4
use
+=operator instead of=indocument.getElementById("demo").innerHTML=– fardjad Commented Aug 29, 2013 at 3:59
6 Answers
Reset to default 1The 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;
}
}
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>";
...
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.
Below code is clearing off all the * that is created. Because innerHTML would replace plete contents of demo. Hence concatenate
with results got in for loop
document.getElementById("demo").innerHTML="<br>";
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.
innerHTMLanddocument.writeare not really parable methods to dynamically change/insert content, since their usage is different and for different purposes.
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>