关于JavaScript函数中的方法名与html标签中的id名重复问题

最新推荐文章于 2021-06-04 19:12:09 发布

原创最新推荐文章于 2021-06-04 19:12:09 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文记录了作者在学习JavaScript过程中遇到的问题及解决过程。通过排查，发现表单ID与事件调用函数名相同导致了程序异常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天开始学了JavaScript，最基本的函数的内嵌，写了一个form，
<form id="aaa" name="calcForm" action="#" method="post" onSubmit="calc()">
被除数：<input type="text" name="dividend" id="input1"><br/>
除数：<input type="text" name="divisor" id="input2"><br/>
<input type="submit" id="btn" value="计算" ">
</form>
然后form触发onSubmit()事件，调用JavaScript中的clac()函数，
<script type="text/javascript">
  function calc(){
   var dividend = document.getElementById("input1").value;
   var divisor = document.getElementById("input2").value;
   var result = 0;
   result = dividend/divisor;
   alert("运行结果："+dividend+"/"+divisor+"="+result);
  }
</script>
很简单的逻辑，本以为会和书上的结果一样，谁知道不上手不知道，一上手吓一跳！最开始是直接创建了一个Jsp页面，然后在里面写HTML的代码，出错了才发现，又换回了HTML页面，可是换回来之后还是出错，没办法只能一点一点的排查了：
因为什么也不会，只记得一个alert（）可以弹出js框，于是就用这个检查好了，先是在js中又写了一个简单的函数A（），让它alert（“XXX”），把form中的onSubmit调用的改为A（），运行时点击“计算”可以弹出js框。说明整体的逻辑没错，于是在clac()最开始加入alert（“XXX”），调用的方法改回clac(),运行结果没反应，于是错误就锁定在clac()方法中了，检查函数代码，没有发现拼写错误，那是什么原因啊？？？！！！把clac()中的代码复制到了A()中，改为调用A()，结果就行了？？！！！
这是什么操作！莫非是clac这个名字的事？为什么啊？？？前面form的id也是clac，莫非这个冲突?又尝试着改回最初的，然后把form的id改为了aaa,果然正常运行了，那应该就是form的id名，和自身的事件调用函数重复了，但是具体的原理百度了之后也没找到有用的信息，先记着吧，后来的学习中再遇到相关知识的话再留意好了，毕竟刚开始学，也没有什么思路！