var code line stopping the rest code from printing hello world

**vinpkl** · 09-13-2016, 02:46 AM

hi styxlawyer

declaring var and removing break statement didnt made any difference.

it still keeps processing

vineet

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+"'.";
		var i;
		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-13-2016, 02:48 AM

hi john

all your 3 methods mentioned in post #18 are working perfect in both chrome and firefox

thanks a lot

vineet

document.close()

Code:

if(i === pp){document.close(); break; }

innerHTML

Code:

if(i === pp){document.forms[0].innerHTML = op; break; }

creating nodes

Code:

op.appendChild(document.createTextNode("Hello World"));

**jscheuer1** · 09-13-2016, 03:16 AM

Great! I took the liberty of rewriting it more like I might do it. If you have questions about it or other stuff, feel free to ask:

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form name="pform" onsubmit="myfunc(); return false;">
"Hello World"'s to add (integer only, greater than 0):<br>
<input type="text" name="howmany" pattern="[1-9]{1}[0-9]*" required> <!-- pattern requires an integer greater than 0 -->
<input type="submit" value="submit">
<p><input type="reset" value="clear" onclick="clearOutput(); return true;"></p>
</form>
<div id="output"></div>
<script>
function myfunc(){ // error checking (pareseInt, !isNaN and > 0) only for browsers that do not support the pattern attribute
	var pp = parseInt(+document.forms.pform.howmany.value + 1), op = document.getElementById('output');
	if(!isNaN(pp) && pp > 0){
		while(--pp){
		op.appendChild(document.createTextNode("Hello World"));
		op.appendChild(document.createElement("br"));
		op.appendChild(document.createTextNode("\n"));
		}
		
	}
}
function clearOutput(){
	var op = document.getElementById('output');
	while(op.firstChild){
		op.removeChild(op.firstChild);
	}
}	
</script>
</body>
</html>

**vinpkl** · 09-13-2016, 03:48 AM

hi john

i have few questions

why you use "return false" in first function

Code:

<form name="pform" onsubmit="myfunc(); return false;">

why you use "return true" in second function

Code:

<input type="reset" value="clear" onclick="clearOutput(); return true;"></p>

when do we use "return true" and when do we use "return false" ??

what is (--pp) doing in while statement

Code:

while(--pp)

i have used forloops but have never used while with decrement (--pp)

vineet

**jscheuer1** · 09-13-2016, 04:28 AM

When one uses a return value in an event attribute it tells the browser whether or not to also perform whatever the default action for that tag and that attribute/event is (if any).

So, for onsubmit of the form, the default action would be to submit the form and load the page in its action attribute if any - reload the page if there's none or if the action attribute is empty. We don't want that in this case, so we return false.

For the onclick of the reset button the default action is to clear the form. In this case I thought that would be a good idea, so in addition to running the assigned function which clears the output division, I'm returning true to make sure that it also performs its default and clears the form.

Often the browser will guess and guess right in either of these cases (more often the second case), but in order to be sure, it never hurts to specify.

Further, if we assign events with addEventListener or jQuery (and probably also with other script libraries), we have more options as to what will happen with the default event. But I'll leave elaboration on that for another time.

As to the --pp in the while loop - When I and most other folks first learned about loops, we just learned for loops, or at least concentrated mostly on them. They are perhaps more versatile and their logic can often be a bit more straightforward than in while loops. But while loops are more efficient as is the pre-decrement method of iteration. That's why I often use the two of them (while and pre-decrement) together when feasible. The way --pp works in this instance is that, when it's set it's a positive integer - I've already set that up both with error checking, and for browsers that support it, by way of the pattern attribute. Then, as we decrement it, it eventually reaches 0 - which is false, so the loop ends at that point. Quick and easy.