JavaScript：if-else语句太多了？

Question

我对JS有问题。我正在尝试制作三个按类型排序的配料列表（用于酿造药剂），所有这些都是标签中的复选框。

你应该选择（选中）三个列表中的每一个元素，以便酿造药水。如果你选择了正确的成分，然后按下“酿造药水”按钮，你就有了一种确定的药水，如果你选择三种不匹配的成分，它会显示

在页面底部写着“看来这次没用了！”按下“酿造药水”按钮后。

在JavaScript中，我对三个列表都使用了一个数组，对每个列表中的每个元素都使用document.getElementById。然后，我使用了一个if和几个else if语句来构建公式，并在最后添加了一个else语句，以防选中了错误的复选框而没有从选定的成分中提取出药剂。

一切都很好，直到我有三个以上的if语句！只有if和前三个*else if*起作用，但其余的都不起作用，当我只有三个else if时，其他的也不起作用。它只是在结尾处不显示消息，除了第一个if和头三个els if语句。

我故意缩短了代码，留下了一些成分和“公式”，以免让你不知所措。我不得不说，有时几个公式使用相同的成分。对于使用相同“成分”的公式，我试着改变数字或删除其他数字，但这也不起作用。

我已经修改了几次代码，但是没有发现任何错误。这真让我困惑。

function pociones() {

  var plantas = [document.getElementById("acacia"), document.getElementById("aceitedecoco"), //0-1
    document.getElementById("aceitedeoliva"), document.getElementById("algafila"), //2-3
    document.getElementById("agrimonia"), document.getElementById("asafetida"), //4-5
    document.getElementById("asaro"), document.getElementById("azafran"), //6-7
    document.getElementById("bellota"), document.getElementById("cabezadetortuga"), //8-9
    document.getElementById("calendula"), document.getElementById("cardamomo"), //10-11
    document.getElementById("clavo"), document.getElementById("consuelda"), //12-13
    document.getElementById("digitalis"), document.getElementById("escrofularia"), //14-15
    document.getElementById("gomapersa"), document.getElementById("hinojo"), //16-17
    document.getElementById("junipero"), document.getElementById("polemonium"), //18-19
    document.getElementById("stachys")
  ]; //20

  var partes = [document.getElementById("cerebrodedemonio"), document.getElementById("cerebrodedragon"), //0-1
    document.getElementById("cerebrodegigante"), document.getElementById("cerebrodemedium"), // 2-3
    document.getElementById("corazondeleon"), document.getElementById("corazondeminotauro"), //4-5
    document.getElementById("corazondepegaso"), document.getElementById("ectoplasma"), //6-7
    document.getElementById("escamadedragondeoro"), document.getElementById("esenciadefuegofatuo"), //8-9
    document.getElementById("esenciadeelemental"), document.getElementById("esporasdehongochillon"), //10-11
    document.getElementById("glanduladeanimal"), document.getElementById("glandulademagoogro"), //12-13
    document.getElementById("higadodeluciogigante"), document.getElementById("nubedevampiro"), //14-15
    document.getElementById("pieldelicantropo"), document.getElementById("pieldesucubo"), //16-17
    document.getElementById("plumadehipogrifo"), document.getElementById("sangrededragon"), //18-19
    document.getElementById("sangredehombrerata"), document.getElementById("sangredeogromago"), //20-21
    document.getElementById("sangredeninfa"), document.getElementById("sangredeogro"), //22-23
    document.getElementById("sangredetroll"), document.getElementById("sudordegigante"), //24-25
    document.getElementById("talamohumano")
  ]; //26


  var gemas = [document.getElementById("alejandrita"), document.getElementById("azabache"), //0-1
    document.getElementById("coral"), document.getElementById("cornalia"), //2-3
    document.getElementById("crisoprasa"), document.getElementById("diamante"), //4-5
    document.getElementById("hematita"), document.getElementById("lapislazuli"), //6-7
    document.getElementById("malaquita"), document.getElementById("onix"), //8-9
    document.getElementById("piedradeluna"), document.getElementById("rubi"), //10-11
    document.getElementById("serpentina"), document.getElementById("turquesa"), //12-13
    document.getElementById("zafiro"), document.getElementById("zircon")
  ]; //14-15

  var texto;

  if (plantas[0].checked && partes[17].checked && gemas[10].checked) {
    texto = "¡Has hecho una poción de polimorfar!";
  } else if (plantas[1].checked && partes[0].checked && gemas[14].checked) {
    texto = "¡Has hecho aceite etéreo!";
  } else if (plantas[2].checked && partes[14].checked && gemas[8].checked) {
    texto = "¡Has hecho aceite resbaladizo!";
  } else if (plantas[3].checked && partes[19].checked && gemas[11].checked) {
    texto = "¡Has hecho una poción de longevidad!";
  } else if (plantas[4].checked && partes[25].checked && gemas[7].checked) {
    texto = "¡Has hecho una poción de fuerza de gigante!";
  } else if (plantas[4].checked && partes[21].checked && gemas[6].checked) {
    texto = "¡Has hecho una poción curación media!";
  } else if (plantas[5].checked && partes[4].checked && gemas[6].checked) {
    texto = "¡Has hecho una poción de heroísmo!";
  } else if (plantas[6].checked && partes[20].checked && gemas[4].checked) {
    texto = "¡Has hecho una poción de disminución!";
  } else if (plantas[7].checked && partes[8].checked && gemas[0].checked) {
    texto = "¡Has hecho una poción de encontrar tesoro!";
  } else if (plantas[8].checked && partes[13].checked && gemas[12].checked) {
    texto = "¡Has hecho una poción de crecimiento!";
  } else if (plantas[8].checked && partes[5].checked && gemas[2].checked) {
    texto = "¡Has hecho una poción de super-heroísmo!";
  } else if (plantas[10].checked && partes[26].checked && gemas[3].checked) {
    texto = "¡Has hecho una poción de clarividencia!";
  } else if (plantas[10].checked && partes[7].checked && gemas[4].checked) {
    texto = "¡Has hecho una poción de invisibilidad!";
  } else if (plantas[12].checked && partes[6].checked && gemas[13].checked) {
    texto = "¡Has hecho una poción de velocidad!";
  } else if (plantas[13].checked && partes[23].checked && gemas[6].checked) {
    texto = "¡Has hecho una poción de curación ligera!";
  } else {
    texto = "El brebaje preparado no ha dado resultado...";
  }

  document.getElementById("solucion").innerHTML = texto;
}

<form>
  <div id="alquimia">
    <div id="plantas">
      <h3>Plantas</h3>
      <input type="checkbox" id="acacia">Acacia o goma arábiga<br>
      <input type="checkbox" id="aceitedecoco">Aceite de coco<br>
      <input type="checkbox" id="aceitedeoliva">Aceite de oliva<br>
      <input type="checkbox" id="algáfila">Algáfila<br>
      <input type="checkbox" id="agrimonia">Agrimonia<br>
      <input type="checkbox" id="asafetida">Asafétida<br>
      <input type="checkbox" id="asaro">Ásaro<br>
      <input type="checkbox" id="azafran">Azafrán<br>
      <input type="checkbox" id="bellota">Bellota<br>
      <input type="checkbox" id="cabezadetortuga">Cabeza de tortuga<br>
    </div>
    <div id="partes">
      <h3>Partes de bestias</h3>
      <input type="checkbox" id="cerebrodedemonio">Cerebro de demonio<br>
      <input type="checkbox" id="cerebrodedragon">Cerebro de dragón<br>
      <input type="checkbox" id="cerebrodegigante">Cerebro de gigante<br>
      <!--Poción de control de gigante-->
      <input type="checkbox" id="cerebrodemedium">Cerebro de médium<br>
      <input type="checkbox" id="corazondeleon">Corazón de león<br>
      <input type="checkbox" id="corazondeminotauro">Corazón de minotauro<br>
      <input type="checkbox" id="corazondepegaso">Corazón de pegaso<br>
      <input type="checkbox" id="ectoplasma">Ectoplasma<br>
      <input type="checkbox" id="escamadedragondeoro">Escama de dragon de oro<br>
      <input type="checkbox" id="esenciadefuegofatuo">Esencia de fuego fatuo<br>
      <input type="checkbox" id="esenciadeelemental">Esencia de elemental<br>
    </div>
    <div class="gemas">
      <h3>Gemas</h3>
      <input type="checkbox" id="alejandrita">Alejandrita<br>
      <input type="checkbox" id="azabache">Azabache<br>
      <input type="checkbox" id="coral">Coral<br>
      <input type="checkbox" id="cornalia">Cornalia<br>
      <input type="checkbox" id="crisoprasa">Crisoprasa<br>
    </div>
  </div>
  <br><br>
  <Button onclick="pociones()" type="button">¡Hacer poción!</Button>
</form>
<p id="solucion"></p>

任何帮助都将不胜感激。

哈维尔

PS - 抱歉，所有的“id”和文本都是西班牙语，希望是可以理解的。

Answer 1

您的即时错误：

  <input type="checkbox" id="algáfila">Algáfila<br>

  document.getElementById("algafila")

阿尔加菲拉 vs 阿尔加菲拉 - ID 不匹配。

您的总体错误：使用重复的代码和在代码的三个部分之间手动复制的数据，而不是使用某种通用数据源并在其中进行迭代。这种方法总是会产生这样的错误。

Answer 2

您的问题是您引用了：

  var gemas = [document.getElementById("alejandrita"), document.getElementById("azabache"), //0-1
document.getElementById("coral"), document.getElementById("cornalia"), //2-3
document.getElementById("crisoprasa"), document.getElementById("diamante"), //4-5
document.getElementById("hematita"), document.getElementById("lapislazuli"), //6-7
document.getElementById("malaquita"), document.getElementById("onix"), //8-9
document.getElementById("piedradeluna"), document.getElementById("rubi"), //10-11
document.getElementById("serpentina"), document.getElementById("turquesa"), //12-13
document.getElementById("zafiro"), document.getElementById("zircon") 
]; //14-15

html中不存在的元素:

  <input type="checkbox" id="alejandrita">Alejandrita<br>
  <input type="checkbox" id="azabache">Azabache<br>
  <input type="checkbox" id="coral">Coral<br>
  <input type="checkbox" id="cornalia">Cornalia<br>
  <input type="checkbox" id="crisoprasa">Crisoprasa<br>

Answer 3

编程是关于自动化过程的。你不会听到我说你这样做的方式是错误的。如果它有效，那么没关系。但是当然，如果你能找到一种方法让它自动检查一切，那就更美了。就像循环穿过所有的x线，检查是否所有的都被检查了。这可能不会更容易，但它会更可扩展。如果你想在十乘十的网格上玩游戏。那么你只需要说这是字段的大小。现在你需要添加所有其他代码行。