JavaScript:太多 if-else 语句？

Question

我在 JS 方面遇到了问题。我正在尝试制作按类型排序的三个成分列表(用于酿造药水)，所有这些都是标签内的复选框。

您应该选择(选中)三个列表中每一个的一个元素才能酿造一剂药水。如果您选择正确的成分并按下“酿造药水”按钮，您就得到了确定的药水，如果您选择了三种不匹配的成分，则会在页面底部显示

表示“看来这次没成功了!”按下“酿造药水”按钮后。

在 JavaScript 中，我对三个列表中的每一个都使用了一个数组，对每个列表中的每个元素使用了 document.getElementById。然后，我使用了一个 if 和几个 else if 语句来构建公式，最后有一个 else 语句，以防出现勾选了错误的复选框，所选成分中没有产生药水。

一切正常，直到我有超过三个 else if 语句!只有 if 和前三个 * else if* 有效，但其余的和 else 都不起作用，当我只有三个 else if 时，它们工作得很好。它只是不在末尾显示消息，除了第一个 if 和前三个 else if 语句。

我故意缩短了代码，留下了一些成分和“公式”，以免让您不知所措。我不得不说，有时几个配方使用相同的成分。我尝试过更改数字或删除使用相同“成分”的公式的else 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

编程就是自动化流程。你不会听到我说你这样做的方式是错误的。如果有效那就没问题了。当然，如果你能找到一种方法让它自动检查所有内容，那就更漂亮了。就像遍历所有 x 线并检查是否所有这些都被选中一样。这可能不会更容易，但会更具可扩展性。如果您想在十乘十的网格上玩游戏。那么你只需说这就是场的大小。现在您需要添加所有其他代码行。