Question

我正在从事计算机科学项目，我想创建一些Javascript，允许用户从一个下拉菜单中选择3个中的1个，从另一个中选择3个中的1个。选择是无家可归者收容所，食物银行和救世军。其次是Duncan，Nanaimo和Victoria。如果用户选择无家可归者收容所和邓肯，它将显示该镇无家可归者的姓名和位置。

我有一部分工作，但似乎我的一些案例是从我的数组共享值。例如，每次我在维多利亚代表无家可归者收容所时更改数组值（例如，救济[6]），它也会改变纳奈莫的食物银行。他们分享案件。我猜它与它们的下降值有关。无家可归者收容所是第三种选择，维多利亚州是第一选择（3 + 1 = 4），纳奈莫和食物银行都是第二选择（2 + 2 = 4）

以下是整个文件：

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

任何人都可以解释并告诉我如何解决这个问题吗？

Answer 1

我发现了3个问题。我猜你忽略了这些。

问题1：

将下拉列表中的值从{1,2,3}更改为{0,1,2}

问题2：

替换

var together = location + place;

与

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

问题3：

替换每个

relief[0];

与

relief[together]

Answer 2

您最好不要将选定的值/ ID添加到一起，并在IF语句中单独使用它们。 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...

希望这有帮助。

编辑 - 可能会稍微更好，更像这样压缩，可以根据偏好交换开关和ifs：

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

Answer 3

您可以尝试将数据格式化为多维数组。这将允许您遍历数组并选择与用户输入的参数匹配的条目。通过不将HTML格式构建到数组中，您可以将该数组用于其他目的。将数据与格式分开也是一种很好的做法。

此方法还具有允许您在同一城市中显示同一类型的多个业务的附加优势。例如，邓肯可能有两支救世军。

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

Javascript Switch语句共享数组值

3 个答案: