Reputation: 13

Javascript Switch Statement Sharing Array Values

I'm working on a computer science project and I was wanting to create some Javascript that allows the user to select 1 of 3 things from one drop down menu and another 1 of 3 things from another. The choices are Homeless Shelter, Food Bank, and Salvation Army. Followed by Duncan, Nanaimo, and Victoria. If the user were to pick Homeless Shelter and Duncan, it would present the name and location of the homeless in that town.

I have that part working but it appears that some of my cases are sharing values from my array. For example, every time I change the Array value (say, Relief[6]) in the case that represents Homeless Shelters in Victoria, it also changes Food Banks in Nanaimo. They're sharing cases. I'm guessing that it has something to do with they're drop down values. Homeless Shelter is the third option and Victoria is the first (3 + 1 = 4) and both Nanaimo and Food Banks are second options (2 + 2 = 4)

Here's the entire document:

     <!DOCTYPE html>

<HTML>

<HEAD>
<title> Homeless Relief </title>
<script language="Javascript">

"use strict";
var relief = new Array();

    relief[0]= "<H3> Homeless Shelter in Duncan </h3><H3> Warmland House </H3>  <H3> 371 Festubert St  250-746-5521 </h3>";
    relief[1]= "<H3> Food Bank in Duncan </h3><H3> Cowichan Valley Baskey Society </H3>  <H3> 5810 Garden St 250-746-1566 </h3>";
    relief[2]= "<H3> Salvation Army in Duncan </h3><H3> Community & Family Services - Cowichan Valley Ministries </H3>  <H3> 280 Trans Canada Hwy 250-746-8669 </h3>";
    relief[3]= "<H3> Homeless Shelter in Nanaimo </h3><H3> Samaritan House  </H2>  <H3> 355 Nicol St 250-753-1474 </H3>";
    relief[4]= "<H3> Food Bank in Nanaimo </h3><H3> Loaves & Fishes Food Bank   </H3>  <H3> 1009 Farquhar St 250-754-8347 </H3>";
    relief[5]= "<H3> Salvation Army in Nanaimo </h3><H3> Nanaimo Community Church  </H2>  <H3> 505 Eighth St 250-753-8834 </H3>";
    relief[6]= "<H3> Homeless Shelter in Victoria </h3><H3> Rock Bay Landing </H3>  <H3> 525 Ellice St 250-383-1951 </h3>" ;
    relief[7]= "<H3> Food Bank in Victoria </h3><H3> The Mustard Seed </H3>  <H3> 625 Queens Ave 250-953-1575  </H3>";
    relief[8]= "<H3> Salvation Army in Victoria </h3><H3> The Salvation Army Stan Hagen Centre for Families </H3>  <H3> 2695 Quadra St 250-386-8521  </H3>";

function getRelief( )
{
var location = parseFloat(document.reliefform.shelter.value);
var place = parseFloat(document.reliefform.area.value);
var together = location + place;

    switch(together)

  {
case 0:
    document.getElementById("info").innerHTML = relief[0];

    break;
case 1:
    document.getElementById("info").innerHTML = relief[0];

    break;
case 2:
    document.getElementById("info").innerHTML = relief[0];

    break;
case 3:
    document.getElementById("info").innerHTML = relief[0];

    break;
case 4:
    document.getElementById("info").innerHTML = relief[0];

    break;
case 5:
    document.getElementById("info").innerHTML = relief[0];

    break;
case 6:
    document.getElementById("info").innerHTML = relief[0];

    break;
case 7:
    document.getElementById("info").innerHTML = relief[0];

    break;
case 8:
    document.getElementById("info").innerHTML = relief[0];

    break;
}
}
</script>
</head>
<body>

<H1> Where can I find places of homeless relief in Duncan, Nanaimo, and Victoria? </H1>

<FORM NAME="reliefform">
<select name="shelter">
<option value="1" selected>Homeless Shelter</option>
<option value="2">Food Bank</option>
<option value="3">Salvation Army</option>
</select>

<select name="area">
<option value="1" selected>Duncan</option>
<option value="2">Nanaimo</option>
<option value="3">Victoria</option>
</select>

<input type="button" value="Location" name="selector" onclick="getRelief()">

</form>

<p id="info"> &nbsp; </p>

</body>
</html>

Can anyone explain and show me how to fix this?

Upvotes: 1

Answers (3)

Sunil D S

Reputation: 140

I find 3 problems in this. I am guessing you have overlooked these.

Problem 1:

Change the values in your drop down from {1,2,3} to {0,1,2}

Problem 2:

Replace

var together = location + place;

with

var jump = document.getElementsByName("shelter")[0].length;
var together = location + (jump * place);

Problem 3:

Replace each

relief[0];

with

relief[together]

Upvotes: 2

adekom

Reputation: 216

You could try formatting your data as a multidimensional array instead. This would allow you to loop through the array and pick out entries that match the parameters inputted by the user. By not building your HTML formatting into the array, you can then use the array for other purposes. It's also just good practice to separate your data from the formatting.

This method also has the added advantage of allowing you to show multiple businesses of the same type in the same city. For example, there may be two Salvation Armies in Duncan.

var relief = Array();

relief[0] = Array();
relief[0]["type"] = "Salvation Army";
relief[0]["city"] = "Duncan";
relief[0]["name"] = "Duncan Salvation Army Drop-off Location";
relief[0]["address"] = "789 Broad Street";

relief[1] = Array();
relief[1]["type"] = "Salvation Army";
relief[1]["city"] = "Duncan";
relief[1]["name"] = "Duncan Salvation Army Store";
relief[1]["address"] = "123 Main Street";

relief[2] = Array();
relief[2]["type"] = "Food Bank";
relief[2]["city"] = "Nanaimo";
relief[2]["name"] = "Nanaimo Food Bank";
relief[2]["address"] = "456 1st Street";

// var names correspond to array keys
// values of form inputs need not be abstracted to numbers. The value of <option> two for city would just be Nanaimo, not 2. This value is more meaningful to someone else viewing your code.

var city = document.reliefform.shelter.value;
var type = document.reliefform.area.value;

for(i = 0; i < relief.length; i++) {
    if(relief[i]["type"] === type && relief[i]["city"] === city) {
        document.getElementById("info").innerHTML += "<h1>" + relief[i]["name"] + "</h1><br /><h3>" + relief[i]["address"] + "</h3><br /><br />";
    }
}

Upvotes: 0

Gareth Hopkins

Reputation: 354

You're probably best not to add the selected values/ids together and use them separately in an IF statement. E.g.

if (location == 1) {
    if (place == 1) {
          document.getElementById("info").innerHTML = relief[0];
    }
    else if (place == 2) {
          document.getElementById("info").innerHTML = relief[1];
    }
    else if (place == 3) {
          document.getElementById("info").innerHTML = relief[2];
    }
} else if (location == 2) {
    ...
} else if (location == 3) { etc...

Hope this helps.

Edit - might be slightly better and more condense like this, can interchange switches and ifs depending on preference:

switch (location) {
  case 1:
    switch (place) {
        case 1:
          document.getElementById("info").innerHTML = relief[0];
          break;
        case 2:
          document.getElementById("info").innerHTML = relief[1];
          break;
        case 3:
          document.getElementById("info").innerHTML = relief[2];
          break;
    }
    break;
  case 2:
    switch (place) {
        ...
    }
    break;
  case 3:
    switch (place) {
        ...
    }
    break;
}

Upvotes: 0

Javascript Switch Statement Sharing Array Values

Answers (3)

Related Questions