Question

示例，函数名称等于输入id的值

＆＃13;

function idade(){

var idade = document.getElementById('idade').value;

alert(idade);
}

＆＃13;

<form name="myForm">

Age: <input type="text" name="idade" id="idade" /></br></br>

<input type="submit" onclick="idade()" />

</form>

＆＃13;

Answer 1

它可以，但在这种情况下，它会被为表单中的输入元素创建的自动变量所遮蔽。

onxyz - 属性样式事件处理程序运行的环境实际上是一系列with语句，将各种标识符（技术上，绑定）转储到作用域中他们在哪里跑，像这样：

with (document) {
    with (form) {
        with (theInput) {
            idade();
        }
    }
}

表单上有一个名为idade的属性，因为输入具有name。因此，在idade()高于上下文的上下文中，idade引用该表单元素，而不是您的全局函数。

这是不使用onxyz - 属性样式事件处理程序的众多原因之一。（另一个原因是他们只能调用转移到其范围内的函数或全局函数，并且最好避免使用全局变量。）

相反，通过addEventListener（旧版IE上的attachEvent）使用现代事件处理。 My answer here提供了一个跨浏览器hookEvent功能，如果您需要支持旧IE，则可以使用该功能。

以下是addEventListener的示例，并使您的函数非全局：

＆＃13;

// Scoping function so we don't create globals
(function() {
  function idade(e) {

    var idade = document.getElementById('idade').value;

    alert(idade);
    
    e.preventDefault();
  }
  
  document.querySelector("input[type=submit]").addEventListener("click", idade);

})();

＆＃13;

<form name="myForm">
  Age: <input type="text" name="idade" id="idade">
  <input type="submit">
</form>

＆＃13;

我在其中解决了一些其他问题：

</br>不是有效的HTML代码。它只是<br>（或<br />如果您正在使用XHTML，但如果您使用的是XHTML，您就会知道这一点。
input元素是无效元素，在/之前不需要>（允许但忽略）。同样，您还没有使用XHTML。
~~您的input没有ID，因此getElementById无法找到它。它有一个名字。~~ （你现在已经添加了它）

另外，在上面我已经idade取消了表单提交，只是表单停留在那里。

为什么函数的名称不能等于javascript中输入的id

1 个答案: