...

View Full Version : NOOB Project



bulldog89801
10-09-2010, 03:59 AM
Hello All,

I'm new to the forum and a total NOOB when it comes to coding at all. It's all Greek to me but I am learning a new career and at 53, I guess you have to start somewhere. I am working on an assignment that has me running in circles and I just canít figure it out. And yet I know you guys will see the issue straight away.

I had to create a form with a table inside of it. The table has two columns. On the left side I have a drop down box with 5 state names in it. On the right side the state flag must be displayed and the state populations pops up in a text box (onChange). Iím lost so any gentle help would be greatly appreciated. And if I have posted incorrectly I appologize in advance!


<script language="JavaScript">
<!-- hide from browsers
// Purpose: State - Flag and Population Assignment
// Built by: William Ramsey

function changeinfo()
{
if (document.stateinfo.choices.value=="s1")
{document.name="caflag.gif"
document.stateinfo.population.value="36,132,147"
}

if (document.stateinfo.choices.value=="s2")
{document.name="nvflag.gif"
document.stateinfo.population.value="2,414,807"
}

if (document.stateinfo.choices.value=="s3")
{document.name="orflag.gif"
document.stateinfo.population.value="3,641,056"
}

if (document.stateinfo.choices.value=="s4")
{document.name="utflag.gif"
document.stateinfo.population.value="2,469,585"
}

if (document.stateinfo.choices.value=="s5")
{document.name="waflag.gif"
document.stateinfo.population.value="6,287,759"
}
}

// Stop hiding -->
</script>
</head>


<body>

<form name="stateinfo">
<table width="461" border="1" style="width: 400px; height: 200px;">

<tbody>

<tr>

<td style="width: 19%; vertical-align: top;">
<p>States</p>

<p>
<select size="1" name="choices" onChange="changeinfo()">
<option value="s1">California</option>
<option value="s2">Nevada</option>
<option value="s3">Oregon</option>
<option value="s4">Utah</option>
<option value="s5">Washington</option>
</select>

</p>

<p>&nbsp;</p>

</td>

<td id="place" style="width: 81%; vertical-align: middle;"><input type="image" name="imagefield" id="imagefield" src="caflag.gif">
<p>&nbsp;</p>
<p>
<label for="population">Population: </label>
<input type="text" name="population" id="population" />
</p>
<p>&nbsp;<br />

</p>

</td>

</tr>


</tbody>
</table>
</form>

</body>
</html>

Chris Hick
10-09-2010, 04:56 AM
Just what is the problem???

bulldog89801
10-09-2010, 05:05 AM
Well, it doesnt work. When you choose a state the population numbers will change but the flags do not. On loading the population numbers for california do not show at all.

Afro_Programmer
10-09-2010, 05:10 AM
var x = document.getElementById("gg");

function changeinfo()
{
if (document.stateinfo.choices.value=="s1")
{

x.setAttribute("src", "smth.jpeg");
document.stateinfo.population.value="36,132,147";

}

if (document.stateinfo.choices.value=="s2")
{
document.stateinfo.population.value="2,414,807";

}

if (document.stateinfo.choices.value=="s3")
{
document.stateinfo.population.value="3,641,056";

}

if (document.stateinfo.choices.value=="s4")
{
document.stateinfo.population.value="2,469,585";

}

if (document.stateinfo.choices.value=="s5")
{

document.stateinfo.population.value="6,287,759";


}
}


"gg" at the top would be the image tag where you want your image.



<image id = "gg" src = "smt.gif" />



You just put "x.setAttribute("src", "pic here") in each of the conditionals.

Old Pedant
10-09-2010, 06:19 AM
There are 3 better ways to code this than they way chosen. Or maybe I should say "more compact" and "easier to write" ways. "Better" implies they would work better, which they wouldn't, really.

So once you get it working this way, think about other ways.

bulldog89801
10-09-2010, 06:48 AM
Well, how can I say this... That’s the way the instructor teaches it and wants it... But I agree there are better ways, more current standards but what can I do... I'm not too good at this so what do I know anyways. LOL... Let me try the suggestions and see if I can get it to work. I will let y'all know.

bulldog89801
10-09-2010, 07:03 AM
Hmmm... I couldnt get that to work either and if I did... LOL... My instructor would have a cow because he has never talked about the setAttribute statement... I just checked my email and he did respond to my question about the issue. Maybe one of you can rephrase it for me...

"It looks to me like its is all set, but there is no image there now so simply add an image as the default, the one that displays when the page opens. go into the image text and name it name="imagename" to match the name in the if statement and I'll bet it works. as you select a state, a new image will replace the default and the text will display.

also, change place to document like in the lines just above these, the text box is inside the same form as the select.
place.stateinfo.population.value"

I dont get it! I knew I should have stuck to just turning a screwdriver! LOL...

Philip M
10-09-2010, 08:06 AM
Yes, it is always annoying (especaillay for beginners) when people post code which does not work. :(

Here you are. As Old Pedant says, your code can be greatly simplified. You can detect that when you find yourself writing the same thing over and over.


<html>
<head>

<script type = "text/javascript">

function changeinfo() {

var val = document.stateinfo.choices.value;
var stinfo = document.stateinfo.population;
var imgfld = document.getElementById("imagefield");

switch (val) {

case "s1":
imgfld.src = "caflag.gif";
stinfo.value = "36,132,147";
break;

case "s2":
imgfld.src = "nvflag.gif";
stinfo.value ="2,414,807";
break;

case "s3":
imgfld.src = "orflag.gif";
stinfo.value ="3,641,056";
break;

case "s4":
imgfld.src = "utflag.gif";
stinfo.value ="2,469,585";
break;

case "s5":
imgfld.src = "waflag.gif.gif";
stinfo.value ="2,469,585";
break;

default:
imgfld.src = "placeholder.gif";
stinfo.value ="";

}

</script>
</head>

<body>

<form name="stateinfo">
<table width="461" border="1" style="width: 400px; height: 200px;">

<tbody>

<tr>

<td style="width: 19%; vertical-align: top;">
<p>States</p>

<p>
<select size="1" name="choices" onChange="changeinfo()">
<option value="0">Choose a state</option>
<option value="s1">California</option>
<option value="s2">Nevada</option>
<option value="s3">Oregon</option>
<option value="s4">Utah</option>
<option value="s5">Washington</option>
</select>

</p>

<p>&nbsp;</p>

</td>

<td id="place" style="width: 81%; vertical-align: middle;"><input type="image" name="imagefield" id="imagefield" src="placeholder.gif">
<p>&nbsp;</p>
<p>
<label for="population">Population: </label>
<input type="text" name="population" id="population" />
</p>
<p>&nbsp;<br />

</p>

</td>

</tr>


</tbody>
</table>

</form>

</body>
</html>

Note that as you are using onchange with a select list you must provide an initial or default value such as "Choose a state" as otherwise California cannot be selected. And a default or placeholder image.

<script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead. The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code. For some reason many instructors have not yet grasped this.

Good luck with your studies! But be aware that many instructors in this subject are barely competent. It is stupid to ask students to do something in a poor, obsolete or inefficient way when they ought to be learning how to do things correctly. If your instructor insists, you can replace the switch block with a repetitive series of if statements as per your original code. Yuk! Puke!

"In the beginner's mind there are many possibilities, but in the expert's mind there are few” - Shunryu Suzuki (Japanese Zen priest, ?-1971)

bulldog89801
10-09-2010, 10:43 AM
I agree completely with you and Old Pendant. Unfortunately, I will have to struggle with the old and outdated teachings and the text book that we are using (JavaScript for Dummies 4th Ed., 2005). But as I was told in class, "It's my way or the Highway!"... I will continue to play with it until I get it right. Or at least until Monday and I will take a bad grade and move forward.

I don’t know how a person can gain marketable skills, learning these old and outdated methods. But then, I'm quickly becoming old and outdated myself. But thank you for the lesson, it shows me that there are much better things around the bend.

Philip M
10-09-2010, 10:57 AM
I don’t know how a person can gain marketable skills, learning these old and outdated methods.

Quite so. Your instructors ought to be ashamed. Often it is clear that they know absolutely everything about Javascript from A to B. :D:D

I have the feeling that very often these people are redundant (failed?) geography or chemistry or needlework teachers who have been re-assigned (re-cycled?).

It is not just a question of "current standards". The code you posted was never satisfactory.

Logic Ali
10-09-2010, 01:12 PM
Obviously you can't use this, but it demonstrates the use of objects to provide associative lookup.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type='text/javascript'>

function changeinfo( box )
{
var data = { 's1' : [ "caflag.gif", "36,132,147" ],
's2' : [ "nvflag.gif", "2,414,807" ],
's3' : [ "orflag.gif", "3,641,056" ],
's4' : [ "utflag.gif", "2,469,585" ],
's5' : [ "waflag.gif", "6,287,759" ] };

if( data[ box.value ] )
{
document.getElementById( 'imagefield' ).src = data[ box.value ][ 0 ];
box.form.population.value = data[ box.value ][ 1 ];
}
}

</script>
</head>

<body>
<form name="stateinfo" action=''>
<table width="461" border="1" style="width: 400px; height: 200px;">
<tbody>
<tr>
<td style="width: 19%; vertical-align: top;">
<p>States
<p>
<select size="1" name="choices" onChange="changeinfo( this )">
<option value="-">Select</option>
<option value="s1" selected>California</option>
<option value="s2">Nevada</option>
<option value="s3">Oregon</option>
<option value="s4">Utah</option>
<option value="s5">Washington</option>
</select>
<p>&nbsp;
</td>
<td id="place" style="width: 81%; vertical-align: middle;">
<input type="image" name="imagefield" id="imagefield" src="caflag.gif">
<p>&nbsp;
<p>
<label for="population">Population: </label>
<input type="text" name="population" id="population" >
<p>&nbsp;<br>
</td>
</tr>
</tbody>
</table>
</form>
<script type='text/javascript'>

/* displays values from default selected option */

changeinfo( document.forms.stateinfo.choices );

</script>
</body>
</html>

bulldog89801
10-09-2010, 05:58 PM
Thank you all for your suggestions. I am printing them out to keep in my notes. I will learn more in this forum, just by reading, than I will get out of this class. You should see my next three assignments before mid-terms... You have to input all code by hand and cannot use any type of editing program like Dreamweaver or Web Expressions. AND it must always contain the outdated js text... LOL...

And all i wanted to learn from this class was VBS for Excel...

Philip M
10-09-2010, 07:14 PM
You have to input all code by hand and cannot use any type of editing program like Dreamweaver or Web Expressions. AND it must always contain the outdated js text... LOL...



That is the way to learn. Code generators such as Dreamweaver (Screambeaver :D) are not thought of highly around here.

Old Pedant
10-09-2010, 08:57 PM
And all i wanted to learn from this class was VBS for Excel...

Ummm...I think you mean VBA for Excel. That is, "Visual Basic for Applications". It's *close* to the same as VBS (which is "VBScript"), but it's not the same. For one thing VBA allows you to specify variables by type, whereas in VBScript all variables are untyped (as in JavaScript).

But I am totally mystified: What does JavaScript in HTML pages have even REMOTELY to do with Excel??? Did you get into the wrong class???

p.s.: And shame on Philip! Screambeaver, indeed. We all know the right name is DreadWhacker. Or is that DuckWalker? Or DoofusWhomper? <grin />

bulldog89801
10-10-2010, 07:20 PM
LOL... I get both of your points! No, I got the right class, that was a typo on my part, they teach Java for the first half of the semester and then VBA for Excel 2007 for the second half of the semester. I sent a mass email to all of the students in the class, and I was very surprised to find out that several others in the class are having the same issues with the style and context or what we are being taught. And I am not alone when it comes to this project.

I have applied several of the hints given to me here, and I am SO CLOSE to figuring it out. The populations now populate in the text box as expected but I still cannot get the images to work. But I haven’t given up, us former Marines are used to beating our heads against the wall. But we always get er done!

Old Pedant
10-10-2010, 10:05 PM
That is utterly and completely nonsense. WHY would somebody who wants to learn how to better control Excel *ALSO* want to learn how to script HTML pages? Or, vice versa, what is the likelihood that somebody interested in Web work would give a flying patootie about Excel?

Whoever put those two together in one course has his cranium firmly embedded in his (or her) nether regions.

It makes as much sense as teaching Spanish for half a semester and then teaching Russian for the other half semester. Because of a lack of time, you learn almost NOTHING about either language and there is almost nothing whatsoever that you can use to relate the learning from one half to the learning from the other half.

Not only that, it presupposes that you will find an instructor who is well-versed in both technologies. I think it is eminently clear that this instructor is a total wipe-out in JavaScript. I can't help but feel that he will be just as inadequate when it comes to Excel. Probably somebody who is reading the book one chapter ahead of you.

Personally, I would say that if you paid for this class you (and all the other students) should rise up and demand a refund.

Feel free to use my Spanish/Russian example. It's a pretty good analogy.

Consider: There is very very little syntax which is in common between JS and VBA. There is virtually no common vocabulary (keywords). There is considerable difference in semantics. And the rules of the two language grammars have a bare minimum in common.

Note: All the above is true when comparing Spanish with Russian: Both of them owe a LITTLE TINY BIT to Latin/Greek roots, especially when it comes to present tense vowels and subject/verb agreement. But Russian is completely different in the past tense [past tense verbs have *gender* agreement with the subject! like adjectives]. And, of course, there is a bare minimum of common words or even common roots. Probably the words for "three" come closest to being the same [tres vs. tri -- latter pronounced tree].
So it is with JS vs. VBA: Both languages have "for" as a keyword, but the syntax *AND SEMANTICS* of a "for" statement are completely different between the two. The analogies could go deeper, but you get the idea. It's just purely and utterly braindead.

Philip M
10-11-2010, 07:41 AM
And, of course, there is a bare minimum of common words or even common roots. Probably the words for "three" come closest to being the same [tres vs. tri -- latter pronounced tree].


Reminds me of the joke about the two Irishmen who saw a notice saying "Tree Fellers Wanted". "Oh", says Paddy, "What a pity there is only the two of us". :D:D

bulldog89801
10-13-2010, 11:59 PM
LOL... Thats funny... Thanks to all of you for you help... I finally found the answer and it worked... Thanks again!



function changeinfo()

{

if (document.stateinfo.choices.value=="0")
{document.stateflags.src="placeholder.gif"
document.stateinfo.population.value=""
}

if (document.stateinfo.choices.value=="s1")
{document.stateflags.src="caflag.gif"
document.stateinfo.population.value="36,132,147"
}

if (document.stateinfo.choices.value=="s2")
{document.stateflags.src="nvflag.gif"
document.stateinfo.population.value="2,414,807"
}

if (document.stateinfo.choices.value=="s3")
{document.stateflags.src="orflag.gif"
document.stateinfo.population.value="3,641,056"
}

if (document.stateinfo.choices.value=="s4")
{document.stateflags.src="utflag.gif"
document.stateinfo.population.value="2,469,585"
}

if (document.stateinfo.choices.value=="s5")
{document.stateflags.src="waflag.gif"
document.stateinfo.population.value="6,287,759"
}
}

// Stop hiding -->
</script>
</head>


<body>

<form name="stateinfo">
<table width="461" border="1" style="width: 400px; height: 200px;">

<tbody>

<tr>

<td style="width: 19%; vertical-align: top;">
<p>States</p>

<p>
<select size="1" name="choices" onChange="changeinfo()">
<option value="0">Choose a State</option>
<option value="s1">California</option>
<option value="s2">Nevada</option>
<option value="s3">Oregon</option>
<option value="s4">Utah</option>
<option value="s5">Washington</option>
</select>

</p>

<p>&nbsp;</p>

</td>

<td style="width: 81%; vertical-align: middle;">
<p><img src="placeholder.gif" name="stateflags" /></p>
<p>
<label for="population">Population: </label>
<input type="text" name="population" id="population" />
</p>
<p>&nbsp;<br />

</p>

</td>

</tr>


</tbody>
</table>
</form>

</body>
</html>

davidwillson
10-14-2010, 01:07 AM
There are 3 better ways to code this than they way chosen. Or maybe I should say "more compact" and "easier to write" ways. "Better" implies they would work better, which they wouldn't, really.

So once you get it working this way, think about other ways.

Well, how can I say this... Thatís the way the instructor teaches it and wants it... But I agree there are better ways, more current standards but what can I do... I'm not too good at this so what do I know anyways. LOL... Let me try the suggestions and see if I can get it to work. I will let y'all know.



___________________
watch movies online (http://moviesonlinefree.biz/)

Old Pedant
10-14-2010, 01:41 AM
Okay, just for starters:


function changeinfo()
{
var choice = document.stateinfo.choices.value;
var f = "";
var p = "";
if (c=="0") { f = "placeholder"; p = "" }
else if ( c == "s1" ) { f = "caflag"; p = "36,132,147"; }
else if ( c == "s2" ) { f = "nvflag"; p = "2,414,807"; }
else if ( c == "s3" ) { f = "orflag"; p = "3,641,056"; }
else if ( c == "s4" ) { f = "utflag"; p = "2,469,585"; }
else if ( c == "s5" ) { f = "waflag"; p = "6,287,759"; }
document.getElementById("stateflags").src = f + ".gif";
document.stateinfo.population.value = p;
}

... and the image should be:

<img src="placeholder.gif" id="stateflags" alt="flag" />



But even more compact:


function changeinfo()
{
var f = "";
var p = "";
switch ( document.stateinfo.choices.value ) {
case "0": f = "placeholder"; p = ""; break;
case "s1": f = "caflag"; p = "36,132,147"; break;
case "s2": f = "nvflag"; p = "2,414,807"; break;
case "s3": f = "orflag"; p = "3,641,056"; break;
case "s4": f = "utflag"; p = "2,469,585"; break;
case "s5": f = "waflag"; p = "6,287,759"; break;
}
document.getElementById("stateflags").src = f + ".gif";
document.stateinfo.population.value = p;
}


And even MORE compact:


var info = [
"placeholder@",
"caflag@36,132,147",
"nvflag@2,414,807",
"orflag@3,641,056",
"utflag@2,469,585",
"waflag@6,287,759" ];
function changeinfo()
{
var temp = info[ document.stateinfo.choices.selectedIndex ].split("@");
document.getElementById("stateflags").src = temp[0] + ".gif";
document.stateinfo.population.value = temp[1];
}


And there are more, but that will get you started.

NOTE: The use of <!-- and --> to hide JavaScript from browsers stopped being necessary with the demise of MSIE 3. MSIE 4 appeared in 1997, so you judge when you can stop using those. It's also worth noting that your code will never do ONE SOLITARY THING in a browser where JavaScript is *NOT* enabled, so it's even more pointless, isn't it?

Old Pedant
10-14-2010, 01:51 AM
One more thing:

If you change your select a tiny bit:

<select size="1" name="choices" onChange="changeinfo(this)">

Then you can make it yet again more compact. For example:


var info = [
"placeholder@",
"caflag@36,132,147",
"nvflag@2,414,807",
"orflag@3,641,056",
"utflag@2,469,585",
"waflag@6,287,759" ];
function changeinfo(field) /* "field" is an arbitrary name of your choosing */
{
var temp = info[ field.selectedIndex ].split("@");
document.getElementById("stateflags").src = temp[0] + ".gif";
field.form.population.value = temp[1];
}

Philip M
10-14-2010, 08:07 AM
bulldog -

<script language="JavaScript">
<!-- hide from browsers
// Stop hiding --> :(


<script language=javascript>is long deprecated and obsolete. Use <script type = "text/javascript"> instead.
The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code. If your instructors still teach this, then IMHO they are not fitted for the job.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum