1. 程式人生 > >關於JavaScript函式中的方法名與html標籤中的id名重複問題

關於JavaScript函式中的方法名與html標籤中的id名重複問題

今天開始學了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名,和自身的事件呼叫函式重複了,但是具體的原理百度了之後也沒找到有用的資訊,先記著吧,後來的學習中再遇到相關知識的話再留意好了,畢竟剛開始學,也沒有什麼思路!