JavaScript - getElementsByClassName funktioniert für eine Funktion, aber nicht für die andere

Question

Ich versuche, eine einfache Seite zu kodieren, wo jeder Klick die Preisgestaltung auf der Website mit getElementsByClassName ändert.

Dies funktioniert:

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

arbeitet nicht 1 Jahr nach der Zugabe von():

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

Wer weiß, warum?

TIA.

Answer 1

Eine Funktion oder Variable in JavaScript kann nicht mit einer Zahl beginnen.

Bezeichner müssen entweder mit einem Dollarzeichen ($), einem Unterstrich (_) oder einem Unicode-Zeichen beginnen.

In Ihrem Fall

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

Alle sind drei Funktionen ungültig.

Answer 2

Dank @Richard Hamilton, dies ist der vollständige Arbeitscode Snipplet.

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