Javascript Switch Statement Sharing Array Values

Question

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?

What the user selected, followed by the name of the location, followed by the address and phone number. Such as: relief[0]= "<H3> Homeless Shelter in Duncan </h3><H3> Warmland House </H3> <H3> 371 Festubert St 250-746-5521 </h3>"; — Paul The Firewood Salesman
– Paul The Firewood Salesman, Commented Nov 29, 2014 at 1:27

Sunil D S · Accepted Answer · 2014-11-29 02:12:27Z

2

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]

edited Nov 29, 2014 at 2:12

answered Nov 29, 2014 at 1:47

Sunil D S

15011 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Vivek Pradhan Over a year ago

This is probably an efficient solution, judging the structure of relief array as per the OP. @Sunil, you might want to generalise your solution by doing this document.getElementsByName("shelter")[0].length instead of 3 in 3*place.

Paul The Firewood Salesman Over a year ago

It's not repeating anymore, but something isn't working right still. All the results are out of order (Selecting Salvation Army in Duncan gets me Home Shelters in Victoria and selecting Home Shelters in Nanaimo gets me Food Banks in Victoria) and the final four combinations (Salvation Army/Nanaimo, Home Shelter/Victoria, Food Bank/Victoria, and Salvation Army/Victoria) are all left blank.

Sunil D S Over a year ago

@VivekPradhan, agreed. The reason why I did not generalize is, the ordering of the strings need not be grouped as mentioned forever. The generalization might break. On the whole, the idea of grouping all string together in that format is just not right. He would be better off maintaining different arrays for each location.

Paul The Firewood Salesman Over a year ago

I just edited it with the var jump = document.getElementsByName("shelter") var together = location + (jump * place); and relief[together] suggestions and it appears to not like the "shelter" part. It's grayed out and nothing is working.

Sunil D S Over a year ago

@PaulTheFirewoodSalesman, I edited my answer. Had missed out the length attribute and also, you need to change the values in your drop down.

|

Gareth Hopkins · Accepted Answer · 2014-11-29 01:29:03Z

0

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;
}

edited Nov 29, 2014 at 1:29

answered Nov 29, 2014 at 1:22

Gareth Hopkins

3541 silver badge11 bronze badges

4 Comments

Gareth Hopkins Over a year ago

Had to edit 3 or 4 times to fix loads of silly mistakes I made copying and pasting, make sure your looking at latest changes. I think it's time for bed!! :)

Paul The Firewood Salesman Over a year ago

It did not seem to work. Was there anything else I needed to add or change? I edited my comment to add the layout of the entire file.

Gareth Hopkins Over a year ago

No, which version did you use? If statements or Switches? I ...'d quite a bit of the code for brevity of course too, you need to copy down the place if statements to the other two location blocks for both types.

Gareth Hopkins Over a year ago

Here's a fiddle but I think that Sunil's option is probably most fitting to the current code setup and most easily scalable. jsfiddle.net/ghopkins/ej46w4f0/1

adekom · Accepted Answer · 2014-11-29 01:59:55Z

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 />";
    }
}

Collectives™ on Stack Overflow

Javascript Switch Statement Sharing Array Values

3 Answers 3

8 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related