toMyCar:119 Uncaught ReferenceError: toJS is not defined at HTMLAnchorElement.onclick

蔡徐坤衝充崇發表於2020-12-31

toMyCar:119 Uncaught ReferenceError: toJS is not defined at HTMLAnchorElement.onclick

首先自己遇到這個問題的時候,看一下自己的解決方案
這是a標籤的程式碼

  <a href="javascript:void(0);" class="ifJs" onclick="ifJs();">結算</a>

這是function函式的程式碼

 //發起結算
    function ifJs() {
        var arr =new Array();
        $(".xzWxz.on").each(function () {
            var id = $(this).parent().attr("data-id");
            console.log(id)
            var num = $(this).parent().find("#count").html();
            console.log(num)
            var obj = new Object();
            obj.id = id;
            obj.num = num;
            arr.push(obj);
        });
        if(arr.length==0){
            alert("至少選擇一個商品結算");
            return false;
        }
        $.ajax({
            url : "order",
            type : "POST",
            data :JSON.stringify(arr),
            success : function (result) {
                //還有地址未填寫的可能
                if(result.code==100){
                    alert("購買成功")
                }else {
                    alert("請登入");
                    window.location.href = "toLogin";
                }
            }
        });
    }

問題所在:
首先我也是網上搜了下,網上還是有很多常見方法的
自己的原因是把函式寫在了$(function(){}); 這個頁面載入的函式裡,感覺一般都是寫在這裡面吧
後來顯示,這和函式未載入,我就把函式放到了<script type="text/javascript"></script>裡面,他就正常了。。。。。。。。。。。

接著我們看看網上的一些可能遇到的問題:

那這是什麼原因呢?為什麼用 href="javascript:search();" 可以,而用οnclick="search();" 確不行呢?

經過我在努力搜尋,綜合國外著名論壇
https://stackoverflow.com/questions/12816400/javascript-typeerror-xxx-is-not-a-function
和國內一些部落格,終於找到了答案,總結如下:
主要原因有幾點:
1、首先確保這函式的js被引入到了頁面;Are you certain you added the script to the page?
2、在呼叫該方法時,確保該方法已經被載入了。在瀏覽器控制檯輸入該方法,能正常執行。 Are you certain it has loaded before you try to call search(); ?
3、使用onclick繫結函式事件時,必須確保href寫成 href="javascript:void(0);" 或者 href="javascript:;" 這樣,第1種形式中的void表示式中的0不能少。如果少些了0,會報“Uncaught SyntaxError: Unexpected token )”的錯誤。
4、函式名不能和頁面的某個標籤的id名相同。一些瀏覽器可以通過在js程式碼中指定ID訪問節點元素,然後定義的函式就會被 DOM中的元素覆蓋了。您需要重新命名函式名稱或元素ID。(感覺這個也經常有人遇到)

Can you provide the html code, maybe you have an element with id search?
in your html code has ID search just like the name of the function.
some browsers can access the node elements just by specifying the ID in the js code and then the function
defined is overridden by the element in the DOM.
you need to rename the function name or the element ID.

經過審查我的程式碼,發現我的程式碼出錯就是因為第4點原因,search()函式名和該頁面包含的子頁面中的一個標籤
的id="search"相同了,下面程式碼為當前的頁面包含的一個彈窗頁面裡的div.

<div id="simple-search" class="simple-search ver_center_fa">                        
    <a id="delContent" class="icon25 icon-delbtns" style="display:none;" οnclick="clearf()"></a>
    <input id="input_ipc" class="search_input" type="text" placeholder="請輸入IPC分類號或關鍵詞">
    <a id="search" href="javascript:void(0)" class="btn_search sprite"></a>
</div>

這裡有個標籤的id=“search”,和我們的方法 search() 同名了,因此引發了衝突了。
解決方法:重新命名函式名稱或元素id即可。我將該id改為了id=“ipc_search” 就好了。

思考:那為什麼我優化之前用 href=“javascript:search();” 可以且沒有報錯呢,為什麼沒有與id="search"衝突?

標籤的href屬性,其中href是hypertext reference的縮略詞,用於設定連結地址。連結地址必須為url地址,
如果沒有給出具體路徑,則預設路徑和當前頁的路徑相同。
而使用href=“javascript:xxx();”,這種寫法本身就是不正規的,是不建議的! javascript: 是一個偽協議,其他的偽協議還有 mail: tel: file: 等等。javascript:是表示在觸發預設動作時,執行一段JavaScript程式碼,而 javascript:; 和javascript:void(0);表示什麼都不執行,這樣點選時就沒有任何反應。

相關文章