JavaScript function does not work when used inside onclick attribute

Question

I have a simple html link, in which I call a JavaScript function onClick and try to switch the value taken in. It's not working.

Here is my code:

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

Don't use lang for your function name, the browser is using it already.

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

The problem is here. Around the onclick event handler there is used with, which allow you to use all global attributes (including lang) there. So it tries to access the global lang property.

So change you function name to anything else, but no attributes names

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

But it will work if you add it as a event handler in Javascript

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

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