JavaScript - getElementsByClassName 适用于一个功能，但不适用于另一个答案

【问题标题】：JavaScript - getElementsByClassName works for one function but not the otherJavaScript - getElementsByClassName 适用于一个功能，但不适用于另一个
【发布时间】：2016-04-06 17:42:21
【问题描述】：

我正在尝试编写一个简单的页面，每次点击都会使用 getElementsByClassName 更改网站上的定价。

这是有效的：

<script>
function monthly() {
    var price = document.getElementsByClassName("price");
    price[0].innerHTML = "$10";
    price[1].innerHTML = "$20";
    price[2].innerHTML = "$30";
    price[3].innerHTML = "$40";
}

</script>
<button onclick="monthly()">Monthly</button>
<button onclick="1year()">1 year</button>
<button onclick="2year()">2 year</button>
<button onclick="3year()">3 year</button>
<br>
<span class="price">$1</span><br>
<span class="price">$2</span><br>
<span class="price">$3</span><br>
<span class="price">$4</span><br>

添加 1year() 后不起作用：

<script>
function monthly() {
    var price = document.getElementsByClassName("price");
    price[0].innerHTML = "$10";
    price[1].innerHTML = "$20";
    price[2].innerHTML = "$30";
    price[3].innerHTML = "$40";
}

function 1year() {
    var price2 = document.getElementsByClassName("price");
    price2[0].innerHTML = "$8";
    price2[1].innerHTML = "$16";
    price2[2].innerHTML = "$24";
    price2[3].innerHTML = "$32";
}

</script>
<button onclick="monthly()">Monthly</button>
<button onclick="1year()">1 year</button>
<button onclick="2year()">2 year</button>
<button onclick="3year()">3 year</button>
<br>
<span class="price">$1</span><br>
<span class="price">$2</span><br>
<span class="price">$3</span><br>
<span class="price">$4</span><br>

有人知道为什么吗？

TIA。

【问题讨论】：

如果你浏览器控制台，你可以找到：Uncaught SyntaxError: Unexpected number

标签： javascript function getelementsbyclassname

【解决方案1】：

JavaScript 中的函数或变量不能以数字开头。

标识符必须以美元符号 ($)、下划线 (_) 或 Unicode 字符开头。

在你的情况下，

<button onclick="1year()">1 year</button>
<button onclick="2year()">2 year</button>
<button onclick="3year()">3 year</button>

3 个函数全部无效。

【讨论】：

你是我的救命恩人！我一直在挠头，不知道为什么！现在都在工作！非常感谢！

【解决方案2】：

感谢@Richard Hamilton，这是完整的工作代码片段。

<script>
function monthly() {
    var price = document.getElementsByClassName("price");
    price[0].innerHTML = "$10";
    price[1].innerHTML = "$20";
    price[2].innerHTML = "$30";
    price[3].innerHTML = "$40";
}

function annually() {
    var price = document.getElementsByClassName("price");
    price[0].innerHTML = "$8";
    price[1].innerHTML = "$16";
    price[2].innerHTML = "$24";
    price[3].innerHTML = "$32";
}

</script>
<button onclick="monthly()">Monthly</button>
<button onclick="annually()">1 year</button>
<br>
<span class="price">$1</span><br>
<span class="price">$2</span><br>
<span class="price">$3</span><br>
<span class="price">$4</span><br>

【讨论】：