javascript - 如何让JavaScript输出？

Question

我一直在尝试编写以下代码来根据分配的数字输出一个值到一个范围。我不确定为什么或如何出错。

function myFunction() {
  var league = 1
  var shirt = 2

  if (league == 1) {
    if (shirt == 1) {
      document.getElementById("shirt").innerHTML = "Score 70+ Goals = 7,500,000";
    } else if (shirt == 2) {
      document.getElementById("shirt").innerHTML = "Score 60+ Goals = 6,000,000";
    } else if (shirt == 3) {
      document.getElementById("shirt").innerHTML = "Score 55+ Goals = 5,500,000";
    } else if (shirt == 4) {
      document.getElementById("shirt").innerHTML = "Score 50+ Goals = 5,000,000";
    } else if (shirt == 5) {
      document.getElementById("shirt").innerHTML = "Score 45+ Goals = 4,500,000";
    } else if (shirt == 6) {
      document.getElementById("shirt").innerHTML = "Score 40+ Goals = 4,000,000";
    } else if (shirt == 7) {
      document.getElementById("shirt").innerHTML = "Score 35+ Goals = 3,000,000";
    }
  } else if (league == 2) {
    if (shirt == 1) {
      document.getElementById("shirt").innerHTML = "Score 70+ Goals = 7,000,000";
    } else if (shirt == 2) {
      document.getElementById("shirt").innerHTML = "Score 60+ Goals = 5,500,000";
    } else if (shirt == 3) {
      document.getElementById("shirt").innerHTML = "Score 55+ Goals = 5,000,000";
    } else if (shirt == 4) {
      document.getElementById("shirt").innerHTML = "Score 50+ Goals = 4,500,000";
    } else if (shirt == 5) {
      document.getElementById("shirt").innerHTML = "Score 45+ Goals = 4,000,000";
    } else if (shirt == 6) {
      document.getElementById("shirt").innerHTML = "Score 40+ Goals = 3,500,000";
    } else if (shirt == 7) {
      document.getElementById("shirt").innerHTML = "Score 35+ Goals = 2,500,000";
    }
  } else if (league == 3) {
    if (shirt == 1) {
      document.getElementById("shirt").innerHTML = "Score 70+ Goals = 6,500,000";
    } else if (shirt == 2) {
      document.getElementById("shirt").innerHTML = "Score 60+ Goals = 5,000,000";
    } else if (shirt == 3) {
      document.getElementById("shirt").innerHTML = "Score 55+ Goals = 4,500,000";
    } else if (shirt == 4) {
      document.getElementById("shirt").innerHTML = "Score 50+ Goals = 4,000,000";
    } else if (shirt == 5) {
      document.getElementById("shirt").innerHTML = "Score 45+ Goals = 3,500,000";
    } else if (shirt == 6) {
      document.getElementById("shirt").innerHTML = "Score 40+ Goals = 3,000,000";
    } else if (shirt == 7) {
      document.getElementById("shirt").innerHTML = "Score 35+ Goals = 2,000,000";
    }
  }

}

<span id="shirt">Placeholder text</span>

Answer 1

正如马丁在他的回答中解释的那样，你错过了一个函数调用。定义函数后，您可以通过在 JavaScript 代码中调用它来调用函数(即，像 Martin 那样，在代码末尾包含 myFunction(); )，或者您也可以在您的 HTML 代码中添加一个按钮，单击该按钮将调用您的函数，如下所示:

<button onclick="myFunction()">Click me!</button>

您可能还缺少脚本的链接。假设您的脚本位于另一个名为 script.js 的文件中，您需要将此标记添加到 HTML 文档的正文中:

<script src="script.js"></script>

以下是一些您也可以用来清理代码的快速提示:

不要重复调用 document.getElementById()。这样做将指示 JavaScript 重复获取 #shirt 元素。您最好在函数开始时将元素设置为变量:

var shirtElem = document.getElementById("shirt");

然后您将使用 shirtElem.innerHTML 而不是 document.getElementById("shirt").innerHTML。

使用switch大小写使代码更具可读性。这是完全可选的，但您可以查看 the documentation for switch statements here 。您的 if 语句将如下所示:

switch (shirt) {
    case 1:
        // do stuff
        break;
    case 2:
        // do stuff
        break;
    // etc.
}

减少innerHTML 字符串的重复性。 实现此目的的一个简单方法是使用一个简单的函数，该函数将使用模板字符串生成这些字符串。您还可以使用一些变量来保存您正在使用的数字，然后根据您似乎正在使用的模式递减它们。 Click here for a rewrite (on Codepen) just for league 1, also using the other suggestions I've specified.