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.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Can some help me with this code?

    As the title suggests I am stuck in my code. When the button is clicked I want the information for the selected state to be displayed but when I click it now all states are displayed. Can someone help me by explaining my mistake(s) or some advice. The code is as follows.


    <!doctype html>
    <html><head><title>program 6</title>
    <script type="text/javascript">
    function getStateData(sData) {
    var mainDiv = document.getElementById("display");
    for(var i=0; i<sData.length; i++) {
    mainDiv.innerHTML += "State: " + sData[i].State + "<br>";
    mainDiv.innerHTML += "Abbrev: " + sData[i].Abbreviation + "<br>";
    mainDiv.innerHTML += "Statehood: " + sData[i].Statehood + "<br>";
    mainDiv.innerHTML += "Capital: " + sData[i].Capital + "<br><br>";
    }
    }

    function insertStateURL() {

    var state = document.getElementById("selState");
    var whichState = state.options[state.selectedIndex].value;
    var stateURL = "http://legacy.jefferson.kctcs.edu/users/mark.prather/states.txt";

    var newScript = document.createElement('script');
    newScript.setAttribute('src', stateURL);
    document.getElementsByTagName('head')[0].appendChild(newScript);
    }




    </script>
    </head><body>

    <form>
    <p>
    <select id="selState">
    <option value="AL" selected>Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NV">Nevada</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NM">New Mexico</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="ND">North Dakota</option>
    <option value="OH">Ohio</option>
    <option value="OK">Oklahoma</option>
    <option value="OR">Oregon</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="SD">South Dakota</option>
    <option value="TN">Tennessee</option>
    <option value="TX">Texas</option>
    <option value="UT">Utah</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="WV">West Virginia</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
    </select>
    </p>
    <p>
    <input type="button" value="Get State Data" onclick="insertStateURL()" />
    </p>
    </form>
    <div id="display"></div>

    </body></html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Code just makes no sense at all.

    You are asking to load the url http://legacy.jefferson.kctcs.edu/users/mark.prather/states.txt
    But that URL indeed consists of the data for *ALL* states.

    It consists of:
    Code:
    getStateData(
        [
            {State:"Alabama",Abbreviation:"AL",Statehood:1819,Capital:"Montgomery"},
            {State:"Alaska",Abbreviation:"AK",Statehood:1959,Capital:"Juneau"},
            {State:"Arizona",Abbreviation:"AZ",Statehood:1912,Capital:"Phoenix"},
            ... etc ...
       ];
    So that code calls your getStateDate indeed passing in an array of objects.

    But then look at your getStateDate() function:
    Code:
    function getStateData(sData) 
    {
        var mainDiv = document.getElementById("display");
        for(var i=0; i<sData.length; i++) 
        {
            mainDiv.innerHTML += "State: " + sData[i].State + "<br>"; 
            mainDiv.innerHTML += "Abbrev: " + sData[i].Abbreviation + "<br>"; 
            mainDiv.innerHTML += "Statehood: " + sData[i].Statehood + "<br>"; 
            mainDiv.innerHTML += "Capital: " + sData[i].Capital + "<br><br>"; 
        }
    }
    so indeed that function *WILL* display *ALL* the states, because it iterates through the entire array.

    **********

    What in the world was the purpose of loading states.txt (which should really be called states.js) in the first place? It has the same content no matter which state was selected, so what is the point?

    The whole page just doesn't make a lot of sense.
    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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    This is *ONE* way to make it work.

    A better way would involve a minor rewrite of that "states.txt" file and would do away with the need for a *LOT* of this code.

    Code:
    <!doctype html>
    <html><head><title>program 6</title>
    </head>
    <body>
    <form>
    <p>
    <select onchange="showStateInfo(this)">
    <option value="">--choose a state--</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NV">Nevada</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NM">New Mexico</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="ND">North Dakota</option>
    <option value="OH">Ohio</option>
    <option value="OK">Oklahoma</option>
    <option value="OR">Oregon</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="SD">South Dakota</option>
    <option value="TN">Tennessee</option>
    <option value="TX">Texas</option>
    <option value="UT">Utah</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="WV">West Virginia</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
    </select>
    </p>
    </form>
    <div id="showinfo" style="display: none;">
        State: <span id="state"></span><br/>
        Abbreviation: <span id="abbr"></span><br/>
        Capital: <span id="capital"></span><br/>
        Statehood year: <span id="year"></span>
    </div>
    
    <script type="text/javascript">
    var allStates = null;
    function getStateData( sarray )
    {
        allStates = sarray;
    }
    
    function showStateInfo( sel ) 
    {
        var sinfo = document.getElementById("showinfo");
        sinfo.style.display = "none";
    
        if ( sel.selectedIndex == 0 ) return; // nothing to show
    
        var theState = sel.value;
    
        for ( var s = 0; s < allStates.length; ++s )
        {
            var info = allStates[s];
            if ( info.Abbreviation = theState )
            {
                document.getElementById("state").innerHTML = info.State;
                document.getElementById("abbr").innerHTML = theState;
                document.getElementById("capital").innerHTML = info.Capital;
                document.getElementById("year").innerHTML = info.Statehood;
                sinfo.style.display = "block";
                return;
            }
        }
        alert("Fatal error!  State " + theState + " not found.");
    }
    </script>
    <script type="text/javascript" src="http://legacy.jefferson.kctcs.edu/users/mark.prather/states.txt"></script>
    </body>
    </html>
    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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Here's the better way.

    First, I renamed your "states.txt" file to "states.js" and converted it to look like this:
    Code:
    var allStates = {
        "Alabama" : { Abbreviation:"AL",Statehood:1819,Capital:"Montgomery"},
        "Alaska" : { Abbreviation:"AK",Statehood:1959,Capital:"Juneau"},
        "Arizona" : { Abbreviation:"AZ",Statehood:1912,Capital:"Phoenix"},
        "Arkansas" : { Abbreviation:"AR",Statehood:1836,Capital:"Little Rock"},
        "California" : { Abbreviation:"CA",Statehood:1850,Capital:"Sacramento"},
        "Colorado" : { Abbreviation:"CO",Statehood:1876,Capital:"Denver"},
        "Connecticut" : { Abbreviation:"CT",Statehood:1788,Capital:"Hartford"},
        "Delaware" : { Abbreviation:"DE",Statehood:1787,Capital:"Dover"},
        "Florida" : { Abbreviation:"FL",Statehood:1845,Capital:"Tallahassee"},
        "Georgia" : { Abbreviation:"GA",Statehood:1788,Capital:"Atlanta"},
        "Hawaii" : { Abbreviation:"HI",Statehood:1959,Capital:"Honolulu"},
        "Idaho" : { Abbreviation:"ID",Statehood:1890,Capital:"Boise"},
        "Illinois" : { Abbreviation:"IL",Statehood:1818,Capital:"Springfield"},
        "Indiana" : { Abbreviation:"IN",Statehood:1816,Capital:"Indianapolis"},
        "Iowa" : { Abbreviation:"IA",Statehood:1846,Capital:"Des Moines"},
        "Kansas" : { Abbreviation:"KS",Statehood:1861,Capital:"Topeka"},
        "Kentucky" : { Abbreviation:"KY",Statehood:1792,Capital:"Frankfort"},
        "Louisiana" : { Abbreviation:"LA",Statehood:1812,Capital:"Baton Rouge"},
        "Maine" : { Abbreviation:"ME",Statehood:1820,Capital:"Augusta"},
        "Maryland" : { Abbreviation:"MD",Statehood:1788,Capital:"Annapolis"},
        "Massachusetts" : { Abbreviation:"MA",Statehood:1788,Capital:"Boston"},
        "Michigan" : { Abbreviation:"MI",Statehood:1837,Capital:"Lansing"},
        "Minnesota" : { Abbreviation:"MN",Statehood:1858,Capital:"Saint Paul"},
        "Mississippi" : { Abbreviation:"MS",Statehood:1817,Capital:"Jackson"},
        "Missouri" : { Abbreviation:"MO",Statehood:1821,Capital:"Jefferson City"},
        "Montana" : { Abbreviation:"MT",Statehood:1889,Capital:"Helena"},
        "Nebraska" : { Abbreviation:"NE",Statehood:1867,Capital:"Lincoln"},
        "Nevada" : { Abbreviation:"NV",Statehood:1864,Capital:"Carson City"},
        "New Hampshire" : { Abbreviation:"NH",Statehood:1788,Capital:"Concord"},
        "New Jersey" : { Abbreviation:"NJ",Statehood:1787,Capital:"Trenton"},
        "New Mexico" : { Abbreviation:"NM",Statehood:1912,Capital:"Santa Fe"},
        "New York" : { Abbreviation:"NY",Statehood:1788,Capital:"Albany"},
        "North Carolina" : { Abbreviation:"NC",Statehood:1789,Capital:"Raleigh"},
        "North Dakota" : { Abbreviation:"ND",Statehood:1889,Capital:"Bismarck"},
        "Ohio" : { Abbreviation:"OH",Statehood:1803,Capital:"Columbus"},
        "Oklahoma" : { Abbreviation:"OK",Statehood:1907,Capital:"Oklahoma City"},
        "Oregon" : { Abbreviation:"OR",Statehood:1859,Capital:"Salem"},
        "Pennsylvania" : { Abbreviation:"PA",Statehood:1787,Capital:"Harrisburg"},
        "Rhode Island" : { Abbreviation:"RI",Statehood:1790,Capital:"Providence"},
        "South Carolina" : { Abbreviation:"SC",Statehood:1788,Capital:"Columbia"},
        "South Dakota" : { Abbreviation:"SD",Statehood:1889,Capital:"Pierre"},
        "Tennessee" : { Abbreviation:"TN",Statehood:1796,Capital:"Nashville"},
        "Texas" : { Abbreviation:"TX",Statehood:1845,Capital:"Austin"},
        "Utah" : { Abbreviation:"UT",Statehood:1896,Capital:"Salt Lake City"},
        "Vermont" : { Abbreviation:"VT",Statehood:1791,Capital:"Montpelier"},
        "Virginia" : { Abbreviation:"VA",Statehood:1788,Capital:"Richmond"},
        "Washington" : { Abbreviation:"WA",Statehood:1889,Capital:"Olympia"},
        "West Virginia" : { Abbreviation:"WV",Statehood:1863,Capital:"Charleston"},
        "Wisconsin" : { Abbreviation:"WI",Statehood:1848,Capital:"Madison"},
        "Wyoming" : { Abbreviation:"WY",Statehood:1890,Capital:"Cheyenne"}
    };
    Last edited by Old Pedant; 11-30-2012 at 01:22 AM.
    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.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    And then look at how small and simple the rest gets:
    Code:
    <!doctype html>
    <html><head><title>program 6</title>
    </head>
    <body>
    <form id="theForm">
        <select name="State">
            <option value="">--choose a state--</option>
        </select>
    </form>
    <br/>
    <div id="showinfo" style="display: none;">
        State: <span id="state"></span><br/>
        Abbreviation: <span id="abbr"></span><br/>
        Capital: <span id="capital"></span><br/>
        Statehood year: <span id="year"></span>
    </div>
    
    <script type="text/javascript" src="states.js"></script>
    <script type="text/javascript">
    (
      function( )
      {
          var form = document.getElementById("theForm");
    
          // put options in place:
          var theSelect = form.State;
          for ( var st in allStates )
          {
              theSelect.options.add( new Option( st, st ) );
          }
    
          // now set up for selecting a state:
          theSelect.onchange = showStateInfo;
    
          function showStateInfo( ) 
          {
              var sinfo = document.getElementById("showinfo");
              sinfo.style.display = "none";
    
              if ( this.selectedIndex == 0 ) return; // nothing to show
    
              var theState = this.value;
    
              var info = allStates[theState];
              document.getElementById("state").innerHTML = theState;
              document.getElementById("abbr").innerHTML = info.Abbreviation;
              document.getElementById("capital").innerHTML = info.Capital;
              document.getElementById("year").innerHTML = info.Statehood;
              sinfo.style.display = "block";
      
          }
      }
    )();
    </script>
    </body>
    </html>
    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 to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, but I have to use the url as listed, do I need to get ride of the for loop? But then how do I get just the state that I want out of the array?

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Ummm....look at the code I showed you in post #3.

    I wouldn't have gone as far as I did if I realized this is homework, but since it is...

    It's pretty braindead homework. Your instructor should have his/her license revoked...if there were such a thing. Nobody is likely to really code a site and/or script that way.

    In any case there is *ZERO* reason to dynamically load the script and lots of reasons not to.
    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.


  •  

    Tags for this Thread

    Posting Permissions

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