Question

我在JS遇到问题。我试图按类型制作三个成分列表（用于酿造药水），所有这些都是标签内的复选框。

你应该选择（检查）三个列表中每一个的一个元素，以便酿造药水。如果您选择了正确的成分并按下＆＃34; Brew药水＆＃34;按钮，你有一个确定的药水，如果你选择了三个不匹配的成分，它会在页面底部显示一个

＆＃34;它似乎没有这次工作！＆＃34;按下＆＃34; Brew药水＆＃34;按钮。

在JavaScript中，我为三个列表中的每一个使用了一个数组，对每个列表中的每个元素使用document.getElementById。然后，我使用 if 和几个 else if 语句来构建公式，最后使用 else 语句，如果选中了错误的复选框，并且所选成分中没有药水。

一切正常，直到我有超过三个 else if 的声明！只有 if 和前三个* else if *工作，但不是其余的 else ，当我只有三个 else时工作正常。它根本不会在最后显示消息，除了第一个 if 和前三个 else if 语句。

我故意缩短了代码，留下了一些成分和公式＆＃39;在后面，为了不淹没你。我可以说，有时几种配方使用相同的成分。我已尝试查找数字或删除其他如果用于使用相同＆＃39;成分的公式＆＃39;但那也不起作用。

我已多次修改代码，但无法发现任何错误。这让我很困惑。

＆＃13;

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

＆＃13;

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

＆＃13;

任何帮助都将不胜感激。

哈维尔

PS - 对不起所有＆＃39; id＆＃39;和文本都是西班牙语，尽管如此，希望是可以理解的。

Answer 1

编程就是自动化流程。你不会听到我说你这样做的方式是错误的。如果它工作，那就没关系。但是，如果你能找到一种让它自动检查所有东西的方法，那当然会更漂亮。就像循环所有x线一样，只检查是否所有这些都被检查过。这可能并不容易，但它会更加可扩展。如果您希望以10乘10格的方式玩游戏。那么你只需要说那是场的大小。现在你需要添加所有其他代码行。

Answer 2

您的即时错误：

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

  document.getElementById("algafila")

algáfila与algafila - ID不匹配。

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

Answer 3

您的问题是您正在引用：

  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 4

可以这样做：

var potions = {
 "acacia cerebrodedemonio alejandrita": "¡Has hecho una poción de polimorfar!"
 }

var potionToFind = plantas + " " + partes + " " + gemas
 potions[potionToFind] || return "El brebaje preparado no ha dado resultado..."

所以你使用一个JS对象来保存所有魔药组合作为一个键，它保存你想要为该组合显示的文本的值。如果找不到任何内容，它将返回您在其他地方使用的消息。

编辑：这也会阻止巨大的if或switch语句，并且在查找正确的文本以返回时会更快

Answer 5

这是我的解决方案：

var a=new Array();
a.push("0,17,10,¡Has hecho una poción de polimorfar!");
a.push("1,0,14,¡Has hecho aceite etéreo!");
................
for (var i=0;i<a.length;i++)
{
  temp=a[i].split(",");
  if (plantas[temp[0]].checked && partes[temp[1]].checked && gemas[temp[2]].checked)
    { 
      texto =temp[3];
      break;
    }
}

JavaScript：if-else语句太多了？

5 个答案: