JavaScript - getElementsByClassNameは1つの関数では機能しますが、他の関数では機能しません

Question

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>   

1年を追加した後に動作していない（）：

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

Answer 1

JavaScriptの関数または変数を数値で開始することはできません。

識別子は、ドル記号（$）、アンダースコア（_）またはユニコード文字で始まる必要があります。あなたのケースでは

、

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

すべての3つの機能は無効になります。

Answer 2

@リチャードハミルトンのおかげで、これは完全なコードスニペットです。

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