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

    Exclamation Using text box values to filter the length of a string

    So i have a project where the user has to plug 2 numbers into text boxes and it filters the array to the strings that are in between those two numbers in length.. (here is what it looks like http://www.cs.umd.edu/class/fall2012...oject5Demo.mpg)

    but so far all i have is this and it's not updating:
    Code:
    var names = new Array(50);
            names = ["AFGHANISTAN", "ALGERIA", "ARGENTINA", "BANGLADESH", "BRAZIL", "BURMA",
                     "CANADA", "CHINA", "COLUMBIA", "CONGO", "EGYPT", "ETHIOPIA", "FRANCE",
                     "GERMANY", "GHANA", "INDIA", "INDONESIA", "IRAN", "IRAQ", "ITALY",
                     "JAPAN", "KENYA", "MALAYSIA", "MEXICO", "MOROCCO", "NEPAL", "NIGERIA",
                     "NORTHKOREA", "PAKISTAN", "PERU", "PHILIPPINES", "POLAND", "RUSSIA",
                     "SAUDIARABIA", "SOUTHAFRICA", "SOUTHKOREA", "SPAIN", "SUDAN", "TAIWAN",
                     "TANZANIA", "THAILAND", "TURKEY", "UGANDA", "UKRAINE", "UNITEDKINGDOM",
                     "UNITEDSTATES", "UZBEKISTAN", "VENEZUELA", "VIETNAM", "YEMEN"];
            
            
            document.writeln("<p id='countries'>")
            for (i = 0; i < names.length; i = i + 1) {
                
                document.writeln(names[i] + " ");
            
           }
           document.writeln("</p>");
    
    function filterByLength(names, min, max)   {
                var countriesPara = document.getElementById("countries");
                var countryNames = "";
                for   (i = 0; i < names.length; i = i + 1)  {
                    if (names[i].length < max && names[i].length > min) {
                        countryNames = countryNames + names[i] + " ";
                    }
                }
                countries.innerHTML(countryNames);
    
            }
    and the html
    Code:
    <input  type="text"
                                size="4"
                                maxlength="2"
                                id="minLength" />
                        Minimum Length <br />
                        <input  type="text"
                                size="4"
                                maxlength="2"
                                id="maxLength" />
                        Maximum Length<br />
                        <input type="submit"
                               onclick="filterByLength(names, document.getElementById('minLength').value,  document.getElementById('maxLength').value)"
                               value="update" />
    what am I doing wrong?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    What am I doing wrong?
    Among other things, document.write() is in effect obsolete. document.write() statements must be run before the page finishes loading. Any document.write() statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page (including the Javascript which called it). So document.write() is at best really only useful to write the original content of your page. It cannot be used to update the content of your page after that page has loaded.

    United States and South Africa etc. are two words.

    A submit button does what it says - submits a form to a server. It does not mean "Do something" or "Run a script".

    You need to trap invalid entries such as ?? or x or whatever.


    Code:
    <html>
    <head>
    
    </head>
    <body>
    
    <input  type="text"  size="4"   maxlength="2"  id="minLength" />  Minimum Length <br />
    <input  type="text"  size="4"   maxlength="2"  id="maxLength" />  Maximum Length<br />
    <input type="button"   value="Update" onclick="filterByLength()"  />
    
    <div id = "countries"></div>
    
    <script type = "text/javascript">
    
    var names = new Array(50);
            names = ["AFGHANISTAN", "ALGERIA", "ARGENTINA", "BANGLADESH", "BRAZIL", "BURMA",
                     "CANADA", "CHINA", "COLUMBIA", "CONGO", "EGYPT", "ETHIOPIA", "FRANCE",
                     "GERMANY", "GHANA", "INDIA", "INDONESIA", "IRAN", "IRAQ", "ITALY",
                     "JAPAN", "KENYA", "MALAYSIA", "MEXICO", "MOROCCO", "NEPAL", "NIGERIA",
                     "NORTH KOREA", "PAKISTAN", "PERU", "PHILIPPINES", "POLAND", "RUSSIA",
                     "SAUDI ARABIA", "SOUTH AFRICA", "SOUTH KOREA", "SPAIN", "SUDAN", "TAIWAN",
                     "TANZANIA", "THAILAND", "TURKEY", "UGANDA", "UKRAINE", "UNITED KINGDOM",
                     "UNITED STATES", "UZBEKISTAN", "VENEZUELA", "VIETNAM", "YEMEN"];
                    
    function filterByLength()   {
    
    var min = Number(document.getElementById("minLength").value) || 0; // trap NaN entries
    var max = Number(document.getElementById("maxLength").value) || 0;
    var countriesPara = document.getElementById("countries");
    
    var countryNames = "";
    for   (i = 0; i < names.length; i ++)  {
    var  temp = names[i];
    temp = temp.replace(/\s+/g,"");   // strip spaces so length = number of  letters
    if (temp.length <= max && temp.length >= min) {
    countryNames = countryNames + names[i] + "<br> ";
    }
    }
    countriesPara.innerHTML = countryNames;
    }
    
    </script>
    
    </script>
    
    </body>
    </html>
    Quizmaster: There are nine states in the USA that contain at least one double letter, that's the same letter occuring next to each other in its name. Name one of them.
    Contestant: Dallas
    Last edited by Philip M; 11-09-2012 at 08:45 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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