PDA

View Full Version : var code line stopping the rest code from printing hello world



vinpkl
09-11-2016, 09:23 AM
hi

if i comment or remove the line


var pp = document.pform.name.value;


then the below code prints "hello world" 10 times.

but if i uncomment that line, then the code prints nothing

why is that line stopping the code from working.

no error is seen in firefox console.

vineet



<!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">
var pp = document.pform.name.value;
for(i=0;i<10;i++)
{
document.write("Hello World <br>");
}
</script>
</head>
<body>
<form action="" method="post" name="pform" id="pform">
<input type="text" name="name" id="uniqueID" value=""/>
<input type="submit" value="submit" />
</form>
</body>
</html>

styxlawyer
09-11-2016, 11:05 AM
Two problems. Firstly, that line should be:



var pp = document.getElementById("pform").getAttribute("name");


... and secondly the JavaScript should be after the declaration of the element you are looking for so that it is not executed until the document has finished loading. Also it helps debugging if you print out the value of the variable you have recovered.



<!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">
<input type="text" name="name" id="uniqueID" value=""/>
<input type="submit" value="submit" />
</form>
<script type="text/javascript">
var pp = document.getElementById("pform").getAttribute("name");
for(i=0;i<10;i++)
{
document.write("Hello World "+pp+"<br>");
}
</script>
</body>
</html>

vinpkl
09-11-2016, 02:03 PM
hi styxlawyer

i tried to get value with your getElementById method

but it didnt worked with my function

please see the below code i have commented the getElementById and used my old syntex line

there are 2 problems here :

if i use getElementbyID then i dont get the value and function doesnt print anything.

secondly the forloop prints "hello world" according to numeric number entered in input field but the browser doesnt stop processing

try to enter "5" as numeric number in the input field.

after printing hello world 5 times the browser keeps processing (see screenshot)

what am i doing wrong ??




<!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()">
<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>



here is the screenshot of browser keep processing after forloop stops printing
5944

styxlawyer
09-11-2016, 02:30 PM
The code I posted was tested locally on my laptop and worked perfectly. You have changed several parts of it, so go back to the origin listing and try again. Furthermore, the variable 'pp' is a string so using it in a test in a 'for' loop is meaningless:



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

vinpkl
09-11-2016, 02:35 PM
hi styxlawyer

i didnt understood

how is it a string ??

if a person is entering a number value such as 1 2 3 4 5 ??

and

how should i make it a integer

vineet

jscheuer1
09-11-2016, 02:44 PM
The form hasn't been parsed yet when you try to get a value from it. Put the script after the form or fire it on load or on document ready:


<!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">
<input type="text" name="name" id="uniqueID" value=""/>
<input type="submit" value="submit" />
</form>
<script type="text/javascript">
var pp = document.pform.name.value;
for(i=0;i<10;i++)
{
document.write("Hello World <br>");
}
</script>
</body>
</html>

vinpkl
09-11-2016, 02:49 PM
The form hasn't been parsed yet when you try to get a value from it. Put the script after the form or fire it on load or on document ready:


<!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">
<input type="text" name="name" id="uniqueID" value=""/>
<input type="submit" value="submit" />
</form>
<script type="text/javascript">
var pp = document.pform.name.value;
for(i=0;i<10;i++)
{
document.write("Hello World <br>");
}
</script>
</body>
</html>

hi john

my script is already after the form.

see my post number 3

now the problem is how to run forloop according to input numeric value

thanks
vineet

jscheuer1
09-11-2016, 03:08 PM
He's right about it being a string. All form values are strings. You can covert it to a number (assuming it's a string version of a number) various ways. The easiest is by giving it a sign:


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

Again, this will only work if it is a number represented as a string (will also work if it really is a number, but as a form value, as I say it is by default a string). Often we test these values first to determine they are not isNaN (is not a number) before proceeding. You might have to go:


var pp = document.pform.name.value;
pp = +pp;

vinpkl
09-11-2016, 03:18 PM
hi john

my below code prints "hello world" according to the input number

if you will enter 4 in input box then "hello world" will be printed 5 times

but the page doesnt stop processing

why it keeps on processing even after hello world has been printed 5 times

see the screenshot
5945



<!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()">
<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-11-2016, 04:22 PM
OK, so we went up a blind alley because you didn't explain what it was you were trying to do in the first post. I had assumed you were trying to retrieve the name of the form which was incorrect.

You are seeing an extra "Hello World" because of this line:



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


which should be either:



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


or


for(i=1;i<=pp;i++)


When I run this page on my browser it stops processing after the form has loaded.

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:



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


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



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



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


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


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


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


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



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:



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/showthread.php?80473-var-code-line-stopping-the-rest-code-from-printing-hello-world&p=319164#post319164

vinpkl
09-13-2016, 02:46 AM
hi styxlawyer

declaring var and removing break statement didnt made any difference.

it still keeps processing

vineet



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


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


innerHTML



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


creating nodes



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:


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


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


why you use "return true" in second function


<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


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.

vinpkl
09-13-2016, 05:36 AM
thanks john

for the detailed explanation

vineet