var code line stopping the rest code from printing hello world

**vinpkl** · 09-11-2016, 04:56 PM

hi styxlawyer

you tested it in which browser ??

In firefox it didnt stop processing

in Chrome on pressing submit button it show a blink of "hello world" and then "hello world" get disappear

i even tried
for(i=0;i<pp;i++)

vineet

**styxlawyer** · 09-11-2016, 08:36 PM

One of the quirks of only having one text input in a form is that it is continually being tested, so the page appears to be constantly refreshing. Also, pressing the enter key will submit the form but not run the JavaScript. Both of these "features" can be fixed by adding a second text input which is not displayed. Here's a working example of what I think you are trying to achieve:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function myfunc()
{
	var newContents ="";
  var pp = document.getElementById("formInput").value;
	if(isNaN(pp)) {
		newContents = "Please enter a numeric value."
	}
	else {
		var n = parseInt(pp);
		newContents = "You entered the number '"+n+"'.";
	}
  document.getElementById("placeHolder").innerHTML = newContents;
}	
</script>
</head>
<body>
<form action="" method="post" name="pform" id="pform">
<input type="text" name="name" id="formInput" value="" />
<input type="text" style="display:none;" />
<input type="button" value="submit" onclick="myfunc();" />
</form>
<p>&nbsp;</p>
<p id="placeHolder">&nbsp;</p>
</body>
</html>

**jscheuer1** · 09-12-2016, 01:20 AM

That might work. But since what we both see as the problem is that the form submits, thereby reloading the page. I would simply add a return false; to the submit function so that it doesn't submit and reload the page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form action="" method="post" name="pform" id="pform" onsubmit="myfunc(); return false;">
<input type="text" name="name" id="uniqueID" value=""/>
<input type="submit" value="submit" />
</form>
<script type="text/javascript">
function myfunc()
{
//var pp = document.getElementById("pform").getAttribute("name").value;
var pp = +document.pform.name.value;
if(pp > 0)
	{
		//alert(pp);
		for(i=0;i<=pp;i++)
		{
		document.write("Hello World <br>");
			
			if(i === pp){ break; }
		}
	}
}	
</script>
</body>
</html>

It depends upon what you want to happen, if anything, aside from running the code, and you haven't really told us that yet. There are other ways of dealing with this, again, depending upon what all you want to have happen.

**vinpkl** · 09-12-2016, 11:35 AM

hi styxlawyer

i added forloop in your provided code

it works great only in chrome

But in firefox it keeps on processing after printing "hello world"

my firefox version is 48.0.2

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function myfunc()
{
	var newContents ="";
  var pp = document.getElementById("formInput").value;
	if(isNaN(pp)) {
		newContents = "Please enter a numeric value."
	}
	else {
		var n = parseInt(pp);
		newContents = "You entered the number '"+n+"'.";
		for(i=0;i<pp;i++)
		{
		document.write("Hello World <br>");
			
			if(i === pp){ break; }
		}
	}
  document.getElementById("placeHolder").innerHTML = newContents;
}	
</script>
</head>
<body>
<form action="" method="post" name="pform" id="pform">
<input type="text" name="name" id="formInput" value="" />
<input type="text" style="display:none;" />
<input type="button" value="submit" onclick="myfunc();" />
</form>
<p>&nbsp;</p>
<p id="placeHolder">&nbsp;</p>
</body>
</html>

**vinpkl** · 09-12-2016, 11:37 AM

hi john

i tested your solution of return false

it works great perfect on chrome

but again in firefox it keeps on processing after printing "hello world"

my firefox version is 48.0.2

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form action="" method="post" name="pform" id="pform" onsubmit="myfunc(); return false;">
<input type="text" name="name" id="uniqueID" value=""/>
<input type="submit" value="submit" />
</form>
<script type="text/javascript">
function myfunc()
{
//var pp = document.getElementById("pform").getAttribute("name").value;
var pp = +document.pform.name.value;
if(pp > 0)
	{
		//alert(pp);
		for(i=0;i<=pp;i++)
		{
		document.write("Hello World <br>");
			
			if(i === pp){ break; }
		}
	}
}	
</script>
</body>
</html>

**styxlawyer** · 09-12-2016, 12:03 PM

The code I posted in message #12 works fine in Opera, Firefox and Chrome. It fails to print anything in IE, but that doesn't surprise me at all. Does the code I posted work in your copy of Firefox before you make any changes to it?

**vinpkl** · 09-12-2016, 12:38 PM

Originally Posted by styxlawyer

The code I posted in message #12 works fine in Opera, Firefox and Chrome. It fails to print anything in IE, but that doesn't surprise me at all. Does the code I posted work in your copy of Firefox before you make any changes to it?

hi styxlawyer

yes your original code of post #12 which doesnt have forloop works fine in my firefox

but when i add forloop in it , then it doesnt stop processing in firefox

vineet

**jscheuer1** · 09-12-2016, 02:57 PM

I did a demo, and I see what I missed. Once the page is loaded, using document write obliterates the existing page and creates a new one. In Firefox I guess you have to close the new document in order to stop the loading. However, I would use something other than document.write. Create nodes or use the innerHTML property of an existing element. That said, closing does work to stop the loading:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form action="" method="post" name="pform" id="pform" onsubmit="myfunc(); return false;">
<input type="text" name="name" id="uniqueID" value=""/>
<input type="submit" value="submit" />
</form>
<script type="text/javascript">
function myfunc()
{
//var pp = document.getElementById("pform").getAttribute("name").value;
var pp = +document.pform.name.value;
if(pp > 0)
	{
		//alert(pp);
		for(i=0;i<=pp;i++)
		{
		document.write("Hello World <br>");
			
			if(i === pp){document.close(); break; }
		}
		
	}
}	
</script>
</body>
</html>

One can get a similar effect without document.write:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form action="" method="post" name="pform" id="pform" onsubmit="myfunc(); return false;">
<input type="text" name="name" id="uniqueID" value=""/>
<input type="submit" value="submit" />
</form>
<script type="text/javascript">
function myfunc()
{
//var pp = document.getElementById("pform").getAttribute("name").value;
var pp = +document.pform.name.value, op = '';
if(pp > 0)
	{
		//alert(pp);
		for(i=0;i<=pp;i++)
		{
		op += "Hello World <br>\n";
			
			if(i === pp){document.forms[0].innerHTML = op; break; }
		}
		
	}
}	
</script>
</body>
</html>

Or, without obliterating the form:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form action="" method="post" name="pform" id="pform" onsubmit="myfunc(); return false;">
<input type="text" name="name" id="uniqueID" value=""/>
<input type="submit" value="submit" />
</form>
<div id="output"></div>
<script type="text/javascript">
function myfunc()
{
//var pp = document.getElementById("pform").getAttribute("name").value;
var pp = +document.pform.name.value, op = '';
if(pp > 0)
	{
		//alert(pp);
		for(i=0;i<=pp;i++)
		{
		op += "Hello World <br>\n";
			
			if(i === pp){document.getElementById('output').innerHTML = op; break; }
		}
		
	}
}	
</script>
</body>
</html>

Or, by creating nodes:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form action="" method="post" name="pform" id="pform" onsubmit="myfunc(); return false;">
<input type="text" name="name" id="uniqueID" value=""/>
<input type="submit" value="submit" />
</form>
<div id="output"></div>
<script type="text/javascript">
function myfunc()
{
//var pp = document.getElementById("pform").getAttribute("name").value;
var pp = +document.pform.name.value, op = document.getElementById('output');
if(pp > 0)
	{
		//alert(pp);
		for(i=0;i<=pp;i++)
		{
		op.appendChild(document.createTextNode("Hello World"));
		op.appendChild(document.createElement('br'));
		op.appendChild(document.createTextNode("\n"));
			
			if(i === pp){ break; }
		}
		
	}
}	
</script>
</body>
</html>

**styxlawyer** · 09-12-2016, 03:06 PM

OK, so there's something wrong with your 'for' loop. Here's the code:

Code:

		for(i=0;i<=pp;i++)
		{
		document.write("Hello World <br>");
			
			if(i === pp){ break; }
		}

There are two errors which are immediately obvious. Firstly the variable 'i' used as the loop counter is not declared anywhere in your code and secondly the line 'if(i === pp){ break; }' is redundant as 'i' will never reach the value in 'pp'. The following is sufficient and should work:

Code:

		for(var i=0; i<pp; i++)
		{
		  document.write("Hello World <br>");
		}

**jscheuer1** · 09-12-2016, 03:23 PM

You're right. the var i should be declared, but in this code, that doesn't matter. Your not 100% right about the break statement, it can be useful, though, if all you're doing with it is breaking, then it is redundant. I've solved the actual problem, which is using document.write and not following it with document.close. See:

http://www.dynamicdrive.com/forums/s...164#post319164