Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22

Thread: NOOB Project

  1. #1
    New Coder
    Join Date
    Oct 2010
    Location
    Nevada
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    NOOB Project

    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!

    Code:
    <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>
    Attached Thumbnails Attached Thumbnails NOOB Project-caflag.gif   NOOB Project-nvflag.gif  

  • #2
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    484
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Just what is the problem???

  • #3
    New Coder
    Join Date
    Oct 2010
    Location
    Nevada
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Sep 2010
    Location
    Virginia
    Posts
    112
    Thanks
    11
    Thanked 7 Times in 7 Posts
    Code:
    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.

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

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

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    Oct 2010
    Location
    Nevada
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    New Coder
    Join Date
    Oct 2010
    Location
    Nevada
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    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.

    Code:
    <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)

  • #9
    New Coder
    Join Date
    Oct 2010
    Location
    Nevada
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by bulldog89801 View Post
    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.

    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.

  • #11
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Obviously you can't use this, but it demonstrates the use of objects to provide associative lookup.
    Code:
    <!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>

  • #12
    New Coder
    Join Date
    Oct 2010
    Location
    Nevada
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by bulldog89801 View Post
    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 ) are not thought of highly around here.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Quote Originally Posted by bulldog89801 View Post
    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 />
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    New Coder
    Join Date
    Oct 2010
    Location
    Nevada
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •