在 onclick 属性中使用 JavaScript 函数时不起作用答案

【问题标题】：JavaScript function does not work when used inside onclick attribute在 onclick 属性中使用 JavaScript 函数时不起作用
【发布时间】：2017-03-09 05:52:31
【问题描述】：

我有一个简单的 html 链接，我在其中调用了一个 JavaScript 函数 onClick 并尝试切换输入的值。它不起作用。

这是我的代码：

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>

【问题讨论】：

控制台有错误吗？
@LucasBaizer 不，控制台中没有错误（使用 Dreamweaver）

标签： javascript html variables scope

【解决方案1】：

不要使用lang作为你的函数名，浏览器已经在使用它了。

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>

【讨论】：

难道他不可以使用lang，只要他把它包装成一个私有函数吗？当然这是一个更好的解决方法，但如果他真的想使用那个函数名呢？
果然如你所说，改函数名解决了问题。谢谢，我没有考虑全局 lang 函数..
当我运行 sn-p 时，我仍然遇到两种情况，这是一个 SO sn-p 问题？
@Marcs 你是什么意思你有两个案例？ sn-p 工作正常。你用的是什么浏览器？
很抱歉，我在 sn-p 中只期待“Italiano selezionato”，但我没有看到警报功能。

【解决方案2】：

问题就在这里。在onclick 事件处理程序周围使用了with，它允许您在那里使用所有全局属性（包括lang）。所以它会尝试访问全局的lang 属性。

所以把你的函数名改成别的，但不要attributes名字

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

但如果你将它作为event handler 添加到Javascript 中，它会起作用

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

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

【讨论】：

不是全局语言。

【解决方案3】：

当您将 JavaScript 代码分配给 onclick 处理程序时，它会在一个特殊的范围内执行，其中元素的属性可以直接使用，就像它在 with (element) { } 块中运行一样。

在您的示例中，lang 变量对应于元素的 lang 属性。会导致相同错误的其他示例包括id, title, style 和href。将其视为执行以下代码：

function lang() {
}

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

你可以简单地命名你的函数：

var MyFancyFunctions {
    lang: function {
    }
};

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

或者只是消除歧义：

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

参考资料：

internal raw uncompiled handler

【讨论】：