javascript switch case not taking variable

Question

Mam proste łącze html, w którym nazywam funkcję JavaScript onClick i próbuję zmienić wartość. Nie działa.

Oto mój kod:

function lang(language) { 
 
    switch (language) { 
 
    case "it-IT": 
 
     alert("Italiano selezionato"); 
 
     break; 
 
    case "en-US": 
 
     alert("English selected"); 
 
     break; 
 
    } 
 
}

<p><a href="#" onClick="lang('en-US');">English</a></p> 
 
<p><a href="#" onClick="lang('it-IT');">Italiano</a></p>

Answer 1

Nie używaj lang za nazwą funkcji, przeglądarka używa go już.

function xlang(language) { 
 
    switch (language) { 
 
    case "it-IT": 
 
     alert("Italiano selezionato"); 
 
     break; 
 
    case "en-US": 
 
     alert("English selected"); 
 
     break; 
 
    } 
 
}

<p><a href="#" onClick="xlang('en-US');">English</a></p> 
 
<p><a href="#" onClick="xlang('it-IT');">Italiano</a></p>

Answer 2

Problemem jest tutaj. Wokół obsługi zdarzeń onclick jest używany with, który umożliwia wykorzystanie wszystkich globalnych atrybutów (w tym lang). Próbuje uzyskać dostęp do globalnej właściwości lang.

Więc zmienić ty funkcjonować nazwę na cokolwiek innego, ale nie attributes nazwy

<p><a href="#" onClick="alertLang('en-US');">English</a></p> 
 
<p><a href="#" onClick="alertLang('it-IT');">Italiano</a></p> 
 

 
<script> 
 
    function alertLang(language) { 
 
    switch (language) { 
 
    case "it-IT": 
 
     alert("Italiano selezionato"); 
 
     break; 
 
    case "en-US": 
 
     alert("English selected"); 
 
     break; 
 
    } 
 
} 
 
    </script>

Ale to będzie działać, jeśli dodać go jako event handler w Javascript

<p><a href="#">English</a></p> 
 

 
<script> 
 
    function lang() { 
 
     alert("English selected"); 
 
    } 
 
    
 
    document.querySelector('p').onclick = lang; 
 
    </script>

Answer 3

Po przypisaniu kodu JavaScript do procedury obsługi onclick, jest ona wykonywana w specjalnym zakresie, w którym właściwości elementu są dostępne bezpośrednio, tak jak w bloku with (element) { }.

W twoim przykładzie zmienna lang odpowiada atrybutowi tego elementu w postaci lang. Inne przykłady, które spowodują ten sam błąd, to: id, title, style i href. Potraktujcie to jako wykonanie następującego kodu:

function lang() { 
} 

with(element) { 
    lang("en-US"); 
    // type error since lang resolves to element.lang 
    // instead of the outer lang 
} 

Można po prostu przestrzeń nazw swoją funkcję:

var MyFancyFunctions { 
    lang: function { 
    } 
}; 

<a onclick="MyFancyFunctions.lang('en-US')">English</a> 

Albo po prostu usunąć dwuznaczność:

<a onclick="window.lang('en-US')">English</a> 

Referencje:

The internal raw uncompiled handler