Another Blonde Question...

T

Terry Olson

I'm trying to build a table on an output page based on text input by the
user. And what I am trying to do is create 4 table data boxes on a row, then
start a new row on the 5th one. But I can't quite get it right, the code I
got here will start a new line on odd numbers like 9, 29, 16, etc.What am I
doing wrong?
(ignore any unbalanced braces or the referance to "i", since this is juat a
small snippet.)

if(!isNaN(mxfld) && mxfld != 0) {
for (var w = minfld; w <= mxfld; w++) {
if (w % 4 == 0) {
otpt += "<td>" + lttr.name + " " + w + "</td></tr>"
} else if (w % 5 == 0) {
otpt += "<tr><td>" + lttr.name + " " + w + "</td>"
} else {
otpt += "<td>" + lttr.name + " " + w + "</td>"
}
}
 
R

Randy Webb

Terry said:
I'm trying to build a table on an output page based on text input by the
user. And what I am trying to do is create 4 table data boxes on a row, then
start a new row on the 5th one. But I can't quite get it right, the code I
got here will start a new line on odd numbers like 9, 29, 16, etc.What am I
doing wrong?
(ignore any unbalanced braces or the referance to "i", since this is juat a
small snippet.)

if(!isNaN(mxfld) && mxfld != 0) {
for (var w = minfld; w <= mxfld; w++) {
if (w % 4 == 0) {
otpt += "<td>" + lttr.name + " " + w + "</td></tr>"
} else if (w % 5 == 0) {
otpt += "<tr><td>" + lttr.name + " " + w + "</td>"
} else {
otpt += "<td>" + lttr.name + " " + w + "</td>"
}
}


Use 2 for loops. One to create the TD pairs, and the outer one to create
the TR pairs:

Pseudo-code:

define variable that has the number of columns (td pairs) you want.
Divide array length by number of columns to get number of rows (tr
pairs). Round it up. Either by ceiling or round +1.
Write a for loop that creates the tr pairs.
Inside that for loop, have a second loop that creates the tr pairs.
Have a global counter that gets incremented inside the internal for loop.
Use that global counter to access the elements of lttr.

Take a shot at it, post back your results. I would write it but I am
sick today and simply too tired (or lazy, take your pick) to write it
and test it.
 
T

Thomas Hoheneder

Hello,

I am wondering about your problem. I got your code snippet work. I have just
changed the code positions where I get an error otherwise. Your code is
similar to that one and it starts a new row always after FOUR table datas:

var minfld=1;
var mxfld=18;
var otpt = "<table>\n<tr>";
if(!isNaN(mxfld) && mxfld != 0) {
for (var w = minfld; w <= mxfld; w++) {
if (w % 4 == 0) {
otpt += "<td>" + "a" + " " + w + "</td></tr>\n"
} else if (w % 5 == 0) {
otpt += "<tr><td>" + "b" + " " + w + "</td>"
} else {
otpt += "<td>" + "c" + " " + w + "</td>"
}
}
}
otpt += "</tr>\n</table>";
alert(otpt);

Does this not work on your machine??? If not, maybe some additional
information is needed.

Nice greetings from
Thomas
 
K

kaeli

[email protected] enlightened said:
I'm trying to build a table on an output page based on text input by the
user. And what I am trying to do is create 4 table data boxes on a row, then
start a new row on the 5th one. But I can't quite get it right, the code I
got here will start a new line on odd numbers like 9, 29, 16, etc.What am I
doing wrong?
(ignore any unbalanced braces or the referance to "i", since this is juat a
small snippet.)

if(!isNaN(mxfld) && mxfld != 0) {
for (var w = minfld; w <= mxfld; w++) {
if (w % 4 == 0) {
otpt += "<td>" + lttr.name + " " + w + "</td></tr>"
} else if (w % 5 == 0) {
otpt += "<tr><td>" + lttr.name + " " + w + "</td>"
} else {
otpt += "<td>" + lttr.name + " " + w + "</td>"
}
}


It would greatly help to have fully testable code.
I can't trace this. I don't know what w is. I can't see the value iterate
through the loop to check logic.

A simple test of your logic shows everything is fine, so it's something not
in this code. Probably something changing the value of w or something. or the
min and max values aren't what you think they are. See, you assign them EVERY
time you go through the loop, so if they get changed, the loop will act
funny.

Simple test of logic, works fine:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function doIt()
{
var e = "";
var mxfld = 15;
var minfld = 10;
for (var w = minfld; w <= mxfld; w++)
{
if (w % 4 == 0)
{
e += "w="+w+"<br>";
}
else if (w % 5 == 0)
{
e += "New row: w="+w+" ";
}
else
{
e += "w="+w+" ";
}
}
document.f1.t1.value = e;
}
</script>
</head>

<body>
<form name="f1">
<input type="button" name="b1" value="do it" onClick="doIt()"><br>
<textarea name="t1" value="" rows=20 cols=30></textarea>
</form>
</body>
</html>


--
 
T

Terry Olson

I hacked your code into my script, and your alert box works fine, but when I
put it to the output page, I get the same problem :
<table>
<tr><td>c 1</td><td>c 2</td><td>c 3</td><td>a 4</td></tr>
<tr><td>b 5</td><td>c 6</td><td>c 7</td><td>a 8</td></tr>
<td>c 9</td><tr><td>b 10</td><td>c 11</td><td>a 12</td></tr>
<td>c 13</td><td>c 14</td><tr><td>b 15</td><td>a 16</td></tr>
<td>c 17</td><td>c 18</td></tr>
</table>

So I'm thinking it's my open window code?
newwin = window.open("","output","")
newwin.document.write(otpt)
newwin.document.close()

For those of you who want the Whole code (before I started messing with
reply's from the newsgroup :

<html>
<head>
<title>Affidavit Of Records Labels</title>
<style>
TABLE {
border: thick single Black;
margin : 10px 10px 10px 10px;
}
TD {
text-align : center;
font-weight : bold;
padding : 3px 3px 3px 3px;
}
</style>
<script>
function lttr(name) {
this.name = name
}
lttr[1] = new lttr("A")
lttr[2] = new lttr("P")
lttr[3] = new lttr("Q")
lttr[4] = new lttr("R")
lttr[5] = new lttr("S")
lttr[6] = new lttr("T")
lttr[7] = new lttr("U")
lttr[8] = new lttr("V")
lttr[9] = new lttr("W")
lttr[10] = new lttr("X")
lttr[11] = new lttr("Y")
lttr[12] = new lttr("Z")
function fcus() {
document.lblinpt.max1.focus()
}
function mkelbl() {
var form = document.lblinpt
var otpt = "<html><head><title></title>"
otpt += "<style>.rd { color : Red; } tr { height: 0.5in; } .dta { width :
1.75; } .spcer { width : .3125; }</style>"
otpt += "</head><body style=\"font-weight: bold;\"><table align=\"center\"
width=\"100%\"><tr>"
for (var i = 1; i <= 11; i++) {
var lttrfld = eval("form." + lttr.name + ".value")
var minfld = parseFloat(eval("form.min" + i + ".value"))
var mxfld = parseFloat(eval("form.max" + i + ".value"))
if(!isNaN(mxfld) && mxfld != 0) {
for (var w = minfld; w <= mxfld; w++) {
if (w % 4 == 0) {
otpt += "<td>" + lttr.name + " " + w + "</td></tr>"
} else if (w % 5 == 0) {
otpt += "<tr><td>" + lttr.name + " " + w + "</td>"
} else {
otpt += "<td>" + lttr.name + " " + w + "</td>"
}
}
}
}
newwin = window.open("","output","")
newwin.document.write(otpt)
newwin.document.close()
}
</script>
</head>
<body onLoad="fcus()">
<form name="lblinpt"><table align="center">
<tr><td>Label Letter</td><td>Min. Number</td><td>Max. Number</td></tr>
<script>
for (var i = 1; i <= 11; i++) {
var result = ""
result += "<tr><td><input type=\"text\" size=\"3\" name=" + lttr.name + "
value=" + lttr.name + "></td>"
result += "<td><input type=\"text\" size=\"3\" name=\"min" + i + "\"
value=\"1\"></td>"
result += "<td><input type=\"text\" size=\"3\" tabindex=" + i + "
name=\"max" + i + "\"></td></tr>"
document.write(result)
}
</script>
<tr><td colspan="3"><input type="button" value="Create Labels"
onClick="mkelbl()"></td></tr>
</table>
</body>
</html>
 
T

Terry Olson

Based on a test from another post, I think something goes weird when I make
the new window.

<html>
<head>
<title>Affidavit Of Records Labels</title>
<style>
TABLE {
border: thick single Black;
margin : 10px 10px 10px 10px;
}
TD {
text-align : center;
font-weight : bold;
padding : 3px 3px 3px 3px;
}
</style>
<script>
function lttr(name) {
this.name = name
}
lttr[1] = new lttr("A")
lttr[2] = new lttr("P")
lttr[3] = new lttr("Q")
lttr[4] = new lttr("R")
lttr[5] = new lttr("S")
lttr[6] = new lttr("T")
lttr[7] = new lttr("U")
lttr[8] = new lttr("V")
lttr[9] = new lttr("W")
lttr[10] = new lttr("X")
lttr[11] = new lttr("Y")
lttr[12] = new lttr("Z")
function fcus() {
document.lblinpt.max1.focus()
}
function mkelbl() {
var form = document.lblinpt
var otpt = "<html><head><title></title>"
otpt += "<style>.rd { color : Red; } tr { height: 0.5in; } .dta { width :
1.75; } .spcer { width : .3125; }</style>"
otpt += "</head><body style=\"font-weight: bold;\"><table align=\"center\"
width=\"100%\"><tr>"
for (var i = 1; i <= 11; i++) {
var lttrfld = eval("form." + lttr.name + ".value")
var minfld = parseFloat(eval("form.min" + i + ".value"))
var mxfld = parseFloat(eval("form.max" + i + ".value"))
if(!isNaN(mxfld) && mxfld != 0) {
for (var w = minfld; w <= mxfld; w++) {
if (w % 4 == 0) {
otpt += "<td>" + lttr.name + " " + w + "</td></tr>"
} else if (w % 5 == 0) {
otpt += "<tr><td>" + lttr.name + " " + w + "</td>"
} else {
otpt += "<td>" + lttr.name + " " + w + "</td>"
}
}
}
}
newwin = window.open("","output","")
newwin.document.write(otpt)
newwin.document.close()
}
</script>
</head>
<body onLoad="fcus()">
<form name="lblinpt"><table align="center">
<tr><td>Label Letter</td><td>Min. Number</td><td>Max. Number</td></tr>
<script>
for (var i = 1; i <= 11; i++) {
var result = ""
result += "<tr><td><input type=\"text\" size=\"3\" name=" + lttr.name + "
value=" + lttr.name + "></td>"
result += "<td><input type=\"text\" size=\"3\" name=\"min" + i + "\"
value=\"1\"></td>"
result += "<td><input type=\"text\" size=\"3\" tabindex=" + i + "
name=\"max" + i + "\"></td></tr>"
document.write(result)
}
</script>
<tr><td colspan="3"><input type="button" value="Create Labels"
onClick="mkelbl()"></td></tr>
</table>
</body>
</html>


kaeli said:
us with...
I'm trying to build a table on an output page based on text input by the
user. And what I am trying to do is create 4 table data boxes on a row, then
start a new row on the 5th one. But I can't quite get it right, the code I
got here will start a new line on odd numbers like 9, 29, 16, etc.What am I
doing wrong?
(ignore any unbalanced braces or the referance to "i", since this is juat a
small snippet.)

if(!isNaN(mxfld) && mxfld != 0) {
for (var w = minfld; w <= mxfld; w++) {
if (w % 4 == 0) {
otpt += "<td>" + lttr.name + " " + w + "</td></tr>"
} else if (w % 5 == 0) {
otpt += "<tr><td>" + lttr.name + " " + w + "</td>"
} else {
otpt += "<td>" + lttr.name + " " + w + "</td>"
}
}


It would greatly help to have fully testable code.
I can't trace this. I don't know what w is. I can't see the value iterate
through the loop to check logic.

A simple test of your logic shows everything is fine, so it's something not
in this code. Probably something changing the value of w or something. or the
min and max values aren't what you think they are. See, you assign them EVERY
time you go through the loop, so if they get changed, the loop will act
funny.

Simple test of logic, works fine:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function doIt()
{
var e = "";
var mxfld = 15;
var minfld = 10;
for (var w = minfld; w <= mxfld; w++)
{
if (w % 4 == 0)
{
e += "w="+w+"<br>";
}
else if (w % 5 == 0)
{
e += "New row: w="+w+" ";
}
else
{
e += "w="+w+" ";
}
}
document.f1.t1.value = e;
}
</script>
</head>

<body>
<form name="f1">
<input type="button" name="b1" value="do it" onClick="doIt()"><br>
<textarea name="t1" value="" rows=20 cols=30></textarea>
</form>
</body>
</html>


--
--
~kaeli~
Press any key...NO, NO, NO, NOT THAT ONE!!!!!!
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
 
T

Thomas Hoheneder

Terry Olson said:
So I'm thinking it's my open window code?
newwin = window.open("","output","")
newwin.document.write(otpt)
newwin.document.close()

There are really to many errors in the syntax of your code in a whole.
Please correct them first and then we can continue discussing...

Nice greetings from
Thomas
 
T

Terry Olson

that isn't very helpful, I got this window.open code striaght from my
javascript codebook. What's wrong with it?
 
K

kaeli

[email protected] enlightened said:
Based on a test from another post, I think something goes weird when I make
the new window.

There are so many things wrong with this script, it's surprising it does
anything at all.

Give me a few minutes to post the fixes needed.


--
--
~kaeli~
Hey, if you got it flaunt it! If you don't stare at someone
who does. Just don't lick the TV screen, it leaves streaks.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
 
K

kaeli

[email protected] enlightened said:
Based on a test from another post, I think something goes weird when I make
the new window.

Okay, your login IS off. You're testing the value of w. That's not the value
you want to test. ;)
It isn't indicative of how many columns were written.

Hold on a couple more minutes.


--
--
~kaeli~
Hey, if you got it flaunt it! If you don't stare at someone
who does. Just don't lick the TV screen, it leaves streaks.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
 
K

kaeli

[email protected] enlightened said:
Based on a test from another post, I think something goes weird when I make
the new window.

Okay, this is probably closer to what you want, but I can't tell from your
script WHERE you WANT the row break. So, I set it to break after 4 columns as
well as after each letter.

Check this out and see if it does what you want.
Note that I set the table border to 1 so I could see WTF it was doing. ;)
Also note line breaks and numerous code fixes and improvements (no eval).

I have to go now, but I'll be checking back tomorrow.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Affidavit Of Records Labels</title>
<style>
TABLE {
border: thick single Black;
margin : 10px 10px 10px 10px;
}
TD {
text-align : center;
font-weight : bold;
padding : 3px 3px 3px 3px;
}
</style>
<script type="text/javascript">
function lttr(name)
{
this.name = name
}

var lettr = new Array();
lettr[1] = new lttr("A");
lettr[2] = new lttr("P");
lettr[3] = new lttr("Q");
lettr[4] = new lttr("R");
lettr[5] = new lttr("S");
lettr[6] = new lttr("T");
lettr[7] = new lttr("U");
lettr[8] = new lttr("V");
lettr[9] = new lttr("W");
lettr[10] = new lttr("X");
lettr[11] = new lttr("Y");
lettr[12] = new lttr("Z");

function fcus()
{
document.lblinpt.max1.focus();
}

function mkelbl()
{
var frm = document.forms["lblinpt"];
var otpt = "<html><head><title></title>\n";
otpt += "<style>.rd { color : Red; } tr { height: 0.5in; } .dta { width
:1.75; } .spcer { width : .3125; </style>\n";
otpt += "</head><body style=\"font-weight: bold;\">\n<table border='1' align=
\"center\"width=\"100%\">\n<tr>";
for (var i = 1; i <= 11; i++)
{
var lttrfld = frm.elements[lettr.name].value;
var minfld = parseFloat(frm.elements["min"+i].value);
var mxfld = parseFloat(frm.elements["max"+i].value);
var w;
if(!isNaN(mxfld) && mxfld != 0)
{
for (w = minfld; w <= mxfld; w++)
{
if (w % 4 == 0)
{
otpt += "<td>" + lettr.name + " " + w + "</td>\n</tr>\n"
}
else if (w % 5 == 0)
{
otpt += "<tr>\n<td>" + lettr.name + " " + w + "</td>\n"
}
else
{
otpt += "<td>" + lettr.name + " " + w + "</td>\n"
}
}
}
otpt += "</tr>";
}
if (w % 4 != 0) otpt += "</tr>";
otpt += "</table></body></html>";
newwin = window.open("","output","");
newwin.document.write(otpt);
newwin.document.close();
}
</script>
</head>
<body onLoad="fcus()">
<form name="lblinpt">
<table align="center">
<tr><td>Label Letter</td><td>Min. Number</td><td>Max. Number</td></tr>
<script type="text/javascript">
for (var i = 1; i <= 11; i++) {
var result = ""
result += "<tr><td><input type='text' size='3' name='" + lettr.name + "'
value='" + lettr.name + "'></td>";
result += "<td><input type='text' size='3' name='min" + i + "' value='1'>
</td>";
result += "<td><input type='text' size='3' tabindex='" + i + "' name='max" +
i + "'></td></tr>";
document.write(result);
}
</script>
<tr><td colspan="3"><input type="button" value="Create Labels"
onClick="mkelbl()"></td></tr>
</table>
</body>
</html>


--
--
~kaeli~
Found God? If nobody claims Him in 30 days, He's yours to
keep.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
 
T

Thomas Hoheneder

Terry Olson said:
that isn't very helpful, I got this window.open code striaght from my
javascript codebook. What's wrong with it?

Hello,

there was a huge amount of errors within your page, which I don't want to
mention step by step. I'm not sure if I have understood completely what you
want. But if you want to have always FOUR table cells in each row with the
condition that on each new letter also a new row begins, then the following
code might be the right one for you. Try this and let me know if this works.
(By the way: There was NO mistake within the window.open() section of your
code!)

Nice greetings from
Thomas

Code
----------------------------
<html>
<head>
<title>Affidavit Of Records Labels</title>
<style>
TABLE {
border: thick single Black;
margin : 10px 10px 10px 10px;
}
TD {
text-align : center;
font-weight : bold;
padding : 3px 3px 3px 3px;
}
</style>
<script>
function lttr(name) {
this.name = name;
}
lttr[1] = new lttr("A");
lttr[2] = new lttr("P");
lttr[3] = new lttr("Q");
lttr[4] = new lttr("R");
lttr[5] = new lttr("S");
lttr[6] = new lttr("T");
lttr[7] = new lttr("U");
lttr[8] = new lttr("V");
lttr[9] = new lttr("W");
lttr[10] = new lttr("X");
lttr[11] = new lttr("Y");
lttr[12] = new lttr("Z");
function fcus() {
document.lblinpt.max1.focus()
}
function mkelbl() {
var form = document.lblinpt;
var otpt = "<html><head><title></title>";
otpt += "<style>.rd { color : Red; } tr { height: 0.5in; } .dta { width
:1.75; } .spcer { width : .3125; }</style>";
otpt += "</head><body style=\"font-weight: bold;\"><table
align=\"center\"width=\"100%\">\n<tr>";

for (var i = 1; i <= 11; i++) {
var lttrfld = eval("document.forms[0]." + lttr.name + ".value");
var minfld = parseFloat(eval("form.min" + i + ".value"));
var mxfld = parseFloat(eval("form.max" + i + ".value"));
if(!isNaN(mxfld) && mxfld != 0) {
for (var w = minfld; w <= mxfld; w++) {
if (w % 4 == 0) {
otpt += "<td>" + lttr.name + " " + w + "</td></tr>\n"
if (w != mxfld) otpt += "<tr>";
}
else {
otpt += "<td>" + lttr.name + " " + w + "</td>"
}
}
if ((w-1) % 4 != 0) otpt += "</TR>\n";
otpt += "<TR>";
}
}
otpt += "</tr>\n</table>";
newwin = window.open("","output","");
newwin.document.write(otpt);
newwin.document.close();
}
</script>
</head>
<body onLoad="fcus()">
<form name="lblinpt"><table align="center">
<tr><td>Label Letter</td><td>Min. Number</td><td>Max. Number</td></tr>
<script>
for (var i = 1; i <= 11; i++) {
var result = "";
result += "<tr><td><input type=\"text\" size=\"3\" name=\"" + lttr.name +
"\" value=\"" + lttr.name + "\"></td>";
result += "<td><input type=\"text\" size=\"3\" name=\"min" + i + "\"
value=\"1\"></td>";
result += "<td><input type=\"text\" size=\"3\" tabindex=\"" + i + "\"
name=\"max" + i + "\" value=\"" + i*2 + "\"></td></tr>";
document.write(result);
}
</script>
<tr><td colspan="3"><input type="button" value="Create Labels"
onClick="mkelbl()"></td></tr>
</table>
</body>
</html>
 
T

Terry Olson

There is nothing wrong with my coding, it works just fine, my mistake was
just in adding the divide by 5 if statement. I should have just added the
new row in with the end of row statement. Once I fixed it, everything worked
fine. If my coding is so horribly wrong, point out even one error.

Thomas Hoheneder said:
Terry Olson said:
that isn't very helpful, I got this window.open code striaght from my
javascript codebook. What's wrong with it?

Hello,

there was a huge amount of errors within your page, which I don't want to
mention step by step. I'm not sure if I have understood completely what you
want. But if you want to have always FOUR table cells in each row with the
condition that on each new letter also a new row begins, then the following
code might be the right one for you. Try this and let me know if this works.
(By the way: There was NO mistake within the window.open() section of your
code!)

Nice greetings from
Thomas

Code
----------------------------
<html>
<head>
<title>Affidavit Of Records Labels</title>
<style>
TABLE {
border: thick single Black;
margin : 10px 10px 10px 10px;
}
TD {
text-align : center;
font-weight : bold;
padding : 3px 3px 3px 3px;
}
</style>
<script>
function lttr(name) {
this.name = name;
}
lttr[1] = new lttr("A");
lttr[2] = new lttr("P");
lttr[3] = new lttr("Q");
lttr[4] = new lttr("R");
lttr[5] = new lttr("S");
lttr[6] = new lttr("T");
lttr[7] = new lttr("U");
lttr[8] = new lttr("V");
lttr[9] = new lttr("W");
lttr[10] = new lttr("X");
lttr[11] = new lttr("Y");
lttr[12] = new lttr("Z");
function fcus() {
document.lblinpt.max1.focus()
}
function mkelbl() {
var form = document.lblinpt;
var otpt = "<html><head><title></title>";
otpt += "<style>.rd { color : Red; } tr { height: 0.5in; } .dta { width
:1.75; } .spcer { width : .3125; }</style>";
otpt += "</head><body style=\"font-weight: bold;\"><table
align=\"center\"width=\"100%\">\n<tr>";

for (var i = 1; i <= 11; i++) {
var lttrfld = eval("document.forms[0]." + lttr.name + ".value");
var minfld = parseFloat(eval("form.min" + i + ".value"));
var mxfld = parseFloat(eval("form.max" + i + ".value"));
if(!isNaN(mxfld) && mxfld != 0) {
for (var w = minfld; w <= mxfld; w++) {
if (w % 4 == 0) {
otpt += "<td>" + lttr.name + " " + w + "</td></tr>\n"
if (w != mxfld) otpt += "<tr>";
}
else {
otpt += "<td>" + lttr.name + " " + w + "</td>"
}
}
if ((w-1) % 4 != 0) otpt += "</TR>\n";
otpt += "<TR>";
}
}
otpt += "</tr>\n</table>";
newwin = window.open("","output","");
newwin.document.write(otpt);
newwin.document.close();
}
</script>
</head>
<body onLoad="fcus()">
<form name="lblinpt"><table align="center">
<tr><td>Label Letter</td><td>Min. Number</td><td>Max. Number</td></tr>
<script>
for (var i = 1; i <= 11; i++) {
var result = "";
result += "<tr><td><input type=\"text\" size=\"3\" name=\"" + lttr.name +
"\" value=\"" + lttr.name + "\"></td>";
result += "<td><input type=\"text\" size=\"3\" name=\"min" + i + "\"
value=\"1\"></td>";
result += "<td><input type=\"text\" size=\"3\" tabindex=\"" + i + "\"
name=\"max" + i + "\" value=\"" + i*2 + "\"></td></tr>";
document.write(result);
}
</script>
<tr><td colspan="3"><input type="button" value="Create Labels"
onClick="mkelbl()"></td></tr>
</table>
</body>
</html>
 
T

Terry Olson

There is nothing wrong with my coding, it works just fine, my mistake was
just in adding the divide by 5 if statement. I should have just added the
new row in with the end of row statement. Once I fixed it, everything worked
fine. If my coding is so horribly wrong, point out even one error.

 
R

RobG

Terry said:
that isn't very helpful, I got this window.open code striaght from my
javascript codebook. What's wrong with it? [snip]
There are really to many errors in the syntax of your code in a whole.
Please correct them first and then we can continue discussing...

Please don't top post, it destroys the flow of
the conversation.

There are a stack of errors caused by wrapping, please
manually wrap your posts at about 60 characters to allow
for quote marks. It took me half an hour just to get
your code to "work".

Some minor errors:

<style> should be: <style type="text/css">
<script> should be: <script type="text/javascript">
missing </form> tag

<body onLoad="fcus()">
// Calling focus on a table element that doesn't exist yet
// This may error if the browser executes the script
// faster than it draws the table ... or it may not
// to save doubt, put it at the bottom of the page.

The error is in your logic. When w=4, you end the row and
then start a new one when w=5, but when the letter changes,
you re-set w. So if the first letter has 6 cells, you
write 4, then a new row, then two more. Then you start on
the next letter with w=1 again and write 4 more cells
before ending the row so now this row has 6 cells.

You need to make the cell counter independent of the letter
counter. This error was staring you in the face, you are
writing w to the page.

Rob.

PS. This is a pretty awful way of doing what you are doing.
If it really came from a book, I'd toss it. Your CSS has
issues too, but that's for another group to fix.
 
R

Richard Cornford

Terry said:
There is nothing wrong with my coding,

So you see no potential for improvement at all?
it works just fine,

'works', maybe, 'just fine', probably not.

"Thomas Hoheneder" ...
<snip>

Please do not top-post to comp.lang.javascript.

Valid HTML 4 requires opening STYLE tags to have a TYPE attribute
(usually "text/css").
^^^^^^
No such entry in CSS under border style.

When all 4 margin (and for that matter the padding below) values are
identical it is only necessary to provide one:-

margin:10px;

Valid HTML 4 requires opening SCRIPT tags to have a TYPE attribute
(usually "text/javascript").
function lttr(name) {
this.name = name;
}
lttr[1] = new lttr("A");
lttr[2] = new lttr("P");
lttr[3] = new lttr("Q");
lttr[4] = new lttr("R");
lttr[5] = new lttr("S");
lttr[6] = new lttr("T");
lttr[7] = new lttr("U");
lttr[8] = new lttr("V");
lttr[9] = new lttr("W");
lttr[10] = new lttr("X");
lttr[11] = new lttr("Y");
lttr[12] = new lttr("Z");

This - lttr - is a ludicrous structure for something that is only used
to index strings. An array of those strings would achieve the same at
much less effort.
function fcus() {
document.lblinpt.max1.focus()
}
function mkelbl() {
var form = document.lblinpt;
for (var i = 1; i <= 11; i++) {
var lttrfld = eval("document.forms[0]." + lttr.name + ".value");


Using - eval - to resolve constructed dot-notation property accessors is
always wrong, and as usual a direct replacement with a bracket notation
property accessor would do the job:-

var lttrfld = document.forms[0][ lttr.name].value;

However, - forms[0] - seems inappropriate having already assigned the
local variable - form - a reference to the only form on the page. And
the - lttrfld - local variable does not appear to be used at all in the
rest of the code.

eval is not needed again here:-

var minfld = parseFloat(form["min" + i].value);

eval is not needed again here:-

var minfld = parseFloat(form["max" + i].value);

If - mxfld - is to be checked to see that it is not NaN then it would
probably be worth checking - minfld - as well. and probably ensuring
that min is less than max. Indeed that simplifies the testing
considerably as NaN type-converts to boolean false and always returns
false form any comparison:-

if(mxfld && (minfld < mxfld)){
...
}

The first test type-converts NaN or zero to boolean false (fails) and if
either or the vales are NaN in the second test the comparison returns
false, otherwise min should be less than max anyway.

Granted, if - minfld - was NaN the - w <= mxfld - would return false and
the - for - loop would not be executed. But given that the testing could
be simplified again:-

if(mxfld){ //non-zero number
for(var w = minfld; w <= mxfld; w++){
...
}
}


No closing BODY or HTML tags in the output. Also, within an HTML page it
is advisable to escape the character sequence "</" when they appear in
javascript strings, failing to do so prevent the validation of the page
and may cause problems with some (but as yet unnamed) browsers that take
the HTML specifications seriously.

Window opening is asynchronous so calling document.write on a contained
document fractions of a second after opening the window is risky (the
document may not have been created at that point (and depending on the
speed, and load on, the user's computer)). It would be safer to open the
window prior to creating the HTML string so the time take to create it
gave the system some leeway to get on with creating the new window and
its document. There are safer approaches.

Forms require an ACTION attribute in valid HTML 4, and since this form
could be submitted (which wouldn't make sense in this context) it should
have an onsubmit handler to cancel the submission.
<snip>

SCRIPT elements may not be children of TABLE elements in valid HTML 4.
The only way round that restriction in this context is to write the
entire table out at this point (though the strict HTML 4 DTD doesn't
allow SCRIPT elements to be children of BODY either).

The whole HTML construction process can be considerably simplified and
rendered more efficient:-

<html>
<head>
<title>Affidavit Of Records Labels</title>
<style type="text/css">
TABLE {
border:thick solid Black;
margin:10px;
}
TD {
text-align :center;
font-weight:bold;
padding:3px;
}
</style>
<script type="text/javascript">
function rowContentsToString(){
return '\n\t\t<td>'+this.join('<\/td><td>')+'<\/td>\n';
}

function tbodyContentsToString(){
return '\t<tr>'+this.join('\t<\/tr>\n\t<tr>')+'\t<\/tr>\n';
}

var lttr = ["","A","P","Q","R","S","T","U","V","W","X","Y","Z"];

function fcus() {
document.forms['lblinpt'].elements['max1'].focus();
}

var newwin;
function mkelbl() {
var frmEls = document.forms['lblinpt'].elements;
var lttrfld, minfld, mxfld, outRow;
var outtable = [];
outtable.toString = tbodyContentsToString;
var htmlOut = [
"<html><head><title></title>",
"<style type=\"text/css\">.rd { color : Red; } tr { height:",
"0.5in; } .dta { width:1.75in; } .spcer { width:.3125in; }",
"<\/style><\/head><body style=\"font-weight: bold;\">",
"\n<table align=\"center\"width=\"100%\">\n",
outtable,
"<\/table><\/body><\/html>"
];
newwin = window.open("","output","");
for (var i = 1; i <= 11; i++) {
minfld = parseFloat(frmEls['min' + i].value);
mxfld = parseFloat(frmEls['max' + i].value);
outRow = [];
outRow.toString = rowContentsToString;
if(mxfld){
for (var w = minfld, c = 0; w <= mxfld; w++) {
outRow[outRow.length] = (lttr + " " + w);
if(!(++c % 4)){
outtable[outtable.length] = outRow;
outRow = [];
outRow.toString = rowContentsToString;
}
}
if(outRow.length){
while(outRow.length < 4){
outRow[outRow.length] = "";
}
outtable[outtable.length] = outRow;
}
}
}
newwin.document.write(htmlOut.join(''));
newwin.document.close();
}
</script>
</head>
<body onLoad="fcus()">
<form name="lblinpt" action="" onsubmit="return false;">

<script type="text/javascript">

var tableCont = [['Label Letter','Min. Number','Max. Number']];
tableCont[0].toString = rowContentsToString;
tableCont.toString = tbodyContentsToString;
var tempAr;
for (var i = 1; i <= 11; i++) {
tempAr = [
("<input type=\"text\" size=\"3\" name=\"" +
lttr +
"\" value=\"" +
lttr +
"\">"
),
("<input type=\"text\" size=\"3\" name=\"min" +
i +"\" value=\"1\">"
),
("<input type=\"text\" size=\"3\" tabindex=\"" +
i +
"\" name=\"max" +
i +
"\" value=\"" +
i*2 +
"\">"
)
];
tempAr.toString = rowContentsToString;
tableCont[tableCont.length] = tempAr;
}
tableCont[tableCont.length] = '\n\t\t<td colspan="3"><input'+
' type="button" value="Create Labels" onClick="mkelbl()"></td>\n';
document.write('<table align="center">\n'+tableCont+'<\/table>');
</script>
</form>
</body>
</html>

Richard.
 
R

RobG

Famous last words... I'll grant you some qudos if the OP
doesn't - great effort.

Just one point - the for loops are explicity told to
itterate 11 times - which is the length of the lttr array.
Would it be better to change the lines (x2) with:

for (var i = 1; i <= 11; i++) {
to
for (var i = 1; i <= lttr.length; i++) {

so that the varible lttr can be modified at the point it is
declared/created without needing further mainenance of the
code? A case in point is that "Z" (item[12]) is not
displayed in the table, perhaps the OP didn't count
correctly, or added it afterward and forgot to increment
"11", or ... whatever excuse s/he'd like to offer.


Chees, Rob.
 
T

Terry Olson

this is the best code I can write, considering I haven't done javascript for
3 years, it's good, I'm not a pro, so yes of course it can improve.

And yes, it works more then just fine, it works better then I thought I
could make it. And it works a hell of alot better then some of the coding
that people have given me and that I have seen here.

Richard Cornford said:
Terry said:
There is nothing wrong with my coding,

So you see no potential for improvement at all?
it works just fine,

'works', maybe, 'just fine', probably not.

"Thomas Hoheneder" ...
<snip>

Please do not top-post to comp.lang.javascript.

Valid HTML 4 requires opening STYLE tags to have a TYPE attribute
(usually "text/css").
^^^^^^
No such entry in CSS under border style.

When all 4 margin (and for that matter the padding below) values are
identical it is only necessary to provide one:-

margin:10px;

Valid HTML 4 requires opening SCRIPT tags to have a TYPE attribute
(usually "text/javascript").
function lttr(name) {
this.name = name;
}
lttr[1] = new lttr("A");
lttr[2] = new lttr("P");
lttr[3] = new lttr("Q");
lttr[4] = new lttr("R");
lttr[5] = new lttr("S");
lttr[6] = new lttr("T");
lttr[7] = new lttr("U");
lttr[8] = new lttr("V");
lttr[9] = new lttr("W");
lttr[10] = new lttr("X");
lttr[11] = new lttr("Y");
lttr[12] = new lttr("Z");

This - lttr - is a ludicrous structure for something that is only used
to index strings. An array of those strings would achieve the same at
much less effort.
function fcus() {
document.lblinpt.max1.focus()
}
function mkelbl() {
var form = document.lblinpt;
for (var i = 1; i <= 11; i++) {
var lttrfld = eval("document.forms[0]." + lttr.name + ".value");


Using - eval - to resolve constructed dot-notation property accessors is
always wrong, and as usual a direct replacement with a bracket notation
property accessor would do the job:-

var lttrfld = document.forms[0][ lttr.name].value;

However, - forms[0] - seems inappropriate having already assigned the
local variable - form - a reference to the only form on the page. And
the - lttrfld - local variable does not appear to be used at all in the
rest of the code.

eval is not needed again here:-

var minfld = parseFloat(form["min" + i].value);

eval is not needed again here:-

var minfld = parseFloat(form["max" + i].value);

If - mxfld - is to be checked to see that it is not NaN then it would
probably be worth checking - minfld - as well. and probably ensuring
that min is less than max. Indeed that simplifies the testing
considerably as NaN type-converts to boolean false and always returns
false form any comparison:-

if(mxfld && (minfld < mxfld)){
...
}

The first test type-converts NaN or zero to boolean false (fails) and if
either or the vales are NaN in the second test the comparison returns
false, otherwise min should be less than max anyway.

Granted, if - minfld - was NaN the - w <= mxfld - would return false and
the - for - loop would not be executed. But given that the testing could
be simplified again:-

if(mxfld){ //non-zero number
for(var w = minfld; w <= mxfld; w++){
...
}
}


No closing BODY or HTML tags in the output. Also, within an HTML page it
is advisable to escape the character sequence "</" when they appear in
javascript strings, failing to do so prevent the validation of the page
and may cause problems with some (but as yet unnamed) browsers that take
the HTML specifications seriously.

Window opening is asynchronous so calling document.write on a contained
document fractions of a second after opening the window is risky (the
document may not have been created at that point (and depending on the
speed, and load on, the user's computer)). It would be safer to open the
window prior to creating the HTML string so the time take to create it
gave the system some leeway to get on with creating the new window and
its document. There are safer approaches.

Forms require an ACTION attribute in valid HTML 4, and since this form
could be submitted (which wouldn't make sense in this context) it should
have an onsubmit handler to cancel the submission.
<snip>

SCRIPT elements may not be children of TABLE elements in valid HTML 4.
The only way round that restriction in this context is to write the
entire table out at this point (though the strict HTML 4 DTD doesn't
allow SCRIPT elements to be children of BODY either).

The whole HTML construction process can be considerably simplified and
rendered more efficient:-

<html>
<head>
<title>Affidavit Of Records Labels</title>
<style type="text/css">
TABLE {
border:thick solid Black;
margin:10px;
}
TD {
text-align :center;
font-weight:bold;
padding:3px;
}
</style>
<script type="text/javascript">
function rowContentsToString(){
return '\n\t\t<td>'+this.join('<\/td><td>')+'<\/td>\n';
}

function tbodyContentsToString(){
return '\t<tr>'+this.join('\t<\/tr>\n\t<tr>')+'\t<\/tr>\n';
}

var lttr = ["","A","P","Q","R","S","T","U","V","W","X","Y","Z"];

function fcus() {
document.forms['lblinpt'].elements['max1'].focus();
}

var newwin;
function mkelbl() {
var frmEls = document.forms['lblinpt'].elements;
var lttrfld, minfld, mxfld, outRow;
var outtable = [];
outtable.toString = tbodyContentsToString;
var htmlOut = [
"<html><head><title></title>",
"<style type=\"text/css\">.rd { color : Red; } tr { height:",
"0.5in; } .dta { width:1.75in; } .spcer { width:.3125in; }",
"<\/style><\/head><body style=\"font-weight: bold;\">",
"\n<table align=\"center\"width=\"100%\">\n",
outtable,
"<\/table><\/body><\/html>"
];
newwin = window.open("","output","");
for (var i = 1; i <= 11; i++) {
minfld = parseFloat(frmEls['min' + i].value);
mxfld = parseFloat(frmEls['max' + i].value);
outRow = [];
outRow.toString = rowContentsToString;
if(mxfld){
for (var w = minfld, c = 0; w <= mxfld; w++) {
outRow[outRow.length] = (lttr + " " + w);
if(!(++c % 4)){
outtable[outtable.length] = outRow;
outRow = [];
outRow.toString = rowContentsToString;
}
}
if(outRow.length){
while(outRow.length < 4){
outRow[outRow.length] = "";
}
outtable[outtable.length] = outRow;
}
}
}
newwin.document.write(htmlOut.join(''));
newwin.document.close();
}
</script>
</head>
<body onLoad="fcus()">
<form name="lblinpt" action="" onsubmit="return false;">

<script type="text/javascript">

var tableCont = [['Label Letter','Min. Number','Max. Number']];
tableCont[0].toString = rowContentsToString;
tableCont.toString = tbodyContentsToString;
var tempAr;
for (var i = 1; i <= 11; i++) {
tempAr = [
("<input type=\"text\" size=\"3\" name=\"" +
lttr +
"\" value=\"" +
lttr +
"\">"
),
("<input type=\"text\" size=\"3\" name=\"min" +
i +"\" value=\"1\">"
),
("<input type=\"text\" size=\"3\" tabindex=\"" +
i +
"\" name=\"max" +
i +
"\" value=\"" +
i*2 +
"\">"
)
];
tempAr.toString = rowContentsToString;
tableCont[tableCont.length] = tempAr;
}
tableCont[tableCont.length] = '\n\t\t<td colspan="3"><input'+
' type="button" value="Create Labels" onClick="mkelbl()"></td>\n';
document.write('<table align="center">\n'+tableCont+'<\/table>');
</script>
</form>
</body>
</html>

Richard.
 
T

Terry Olson

There is nothing wrong with my coding, it works exactly how it's supposed
too.

As for the loop eleven times, I did find that it shouldn't be 11, but 12 (a
small oversight), but I think your agrument is against my hard coding it in,
rather then doing the .length? Who cares? The length will never change. IF
that is your argument, that's like you guys telling my coding is horrible
because I don't use semi colons at the end of lines.

RobG said:
Famous last words... I'll grant you some qudos if the OP
doesn't - great effort.

Just one point - the for loops are explicity told to
itterate 11 times - which is the length of the lttr array.
Would it be better to change the lines (x2) with:

for (var i = 1; i <= 11; i++) {
to
for (var i = 1; i <= lttr.length; i++) {

so that the varible lttr can be modified at the point it is
declared/created without needing further mainenance of the
code? A case in point is that "Z" (item[12]) is not
displayed in the table, perhaps the OP didn't count
correctly, or added it afterward and forgot to increment
"11", or ... whatever excuse s/he'd like to offer.


Chees, Rob.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,774
Messages
2,569,599
Members
45,170
Latest member
Andrew1609
Top