Using text box values to filter the length of a string [Archive]

mreitz

11-09-2012, 04:00 PM

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/cmsc122/Projects/P5/Project5Demo.mpg)

but so far all i have is this and it's not updating:

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

<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?

Philip M

11-09-2012, 07:28 PM

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.

<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