JavaScript - getElementsByClassName bir işlev için çalışıyor, ancak diğer değil

Question

Her tıklamanın, web sitesinde fiyatlandırmayı getElementsByClassName kullanarak değiştireceği basit bir sayfa hazırlamaya çalışıyorum.

Bu çalışıyor:

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

Çalışmıyor 1 yıl() ekledikten sonra:

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

kimse neden biliyor mu?

TIA.

Answer 1

JavaScript'teki bir işlev veya değişken bir sayı ile başlayamaz.

Tanımlayıcılar, dolar işareti ($), alt çizgi (_) veya unicode karakteri ile başlamalıdır. Senin durumunda

,

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

tamamı 3 fonksiyonlar geçersizdir.

Answer 2

@Richard Hamilton sayesinde, bu tam çalışan kod snipplet'idir.

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