JavaScript

Question

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

这是有效的：

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

</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"></span><br>
<span class="price"></span><br>
<span class="price"></span><br>
<span class="price"></span><br>

添加 1year() 后无效：

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

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

</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"></span><br>
<span class="price"></span><br>
<span class="price"></span><br>
<span class="price"></span><br>

有人知道为什么吗？

TIA。

Answer 1

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

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

在你的情况下，

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

3个功能全部无效

Answer 2

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

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

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

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

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

JavaScript - getElementsByClassName works for one function but not the other

function

getelementsbyclassname