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代码中调用函数来调用函数（例如，在代码末尾包含myFunction();，就像Martin所做的那样），或者您可以添加一个按钮您点击时会调用您的函数的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.

Answer 2

可能没有任何东西可以执行你的功能。根据您的使用案例，您有多种选择。例如，您可以在定义后运行函数，或者从onclick方法调用函数。

＆＃13;

	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";
			}
	}

	}
   // If you would like to execute function instantly after its definition
   //myFunction();

＆＃13;

<span id="shirt">Placeholder text</span>
<button onclick="myFunction()">Press me!</button>

＆＃13;

Answer 3

您是如何致电myFunction的？也许你可以在那里放alert(!!document.getElementById("shirt"))？这样你就可以确定函数是否正在运行，如果它发出警告true，你就会知道你的元素已准备就绪。

可能出错的两件事：

您的功能根本没有运行
您的功能在衬衫元素在页面上之前正在运行，因为脚本高于该范围的定义并且它同步运行

他们的解决方案是：

致电您的职能
将脚本标记移至页面底部，或参阅this answer

Answer 4

您正在定义函数，但该函数不是由任何事件或元素触发的试试

    <span id="shirt">Placeholder text</span>
<input id="clickMe" type="button" value="clickme" onclick="myFunction();" />

您可以尝试使用开关而不是其他许多

如何制作JavaScript输出？

4 个答案: