JavaScript 类型错误：xxx 不是一个函数。

Question

朋友们，我遇到了一个问题。之前一切都很正常。但是我无法弄清为什么它开始给我这样的错误。
以下是我的JavaScript代码：

function newSupplier() {
    $('div#AddSupplier div.msg').html('').hide();
    $('div#AddSupplier div.loader').show();
    registerSupplier($('div#AddSupplier table.frm :input').serialize()).done(function (a) {
        if (a.Msg) {
            $('div#AddSupplier div.msg').html(a.Msg).removeClass('success').addClass('error').fadeIn();
        }
        else if (a.supid) {
            $('div#AddSupplier div.msg').html('Supplier <span class="l2">' + a.supid + '</span> Registered').removeClass('error').addClass('success').fadeIn();
            $('div#AddSupplier table.frm :input').val('');
        }
    }).always(function () {
        $('div#AddSupplier div.loader').hide();
    }).fail(function () {
        $('div#AddSupplier div.msg').html(errMsgNet).removeClass('success').addClass('error').fadeIn();
    });
}

这里是registerSupplier()函数的代码：

function registerSupplier(dataToPost) {
    return $.ajax({
        type: "POST",
        url: jsonpath + 'Json.ashx?method=RegisterSupplier',
        data: dataToPost
    });
}

以下是完整的JS文件：http://preview.myignou.com/Docs/jScript.js

相关HTML代码：

<div id="ViewOrder">
   <h2>View Order Details</h2>
   <div class="tab-content">
      <table class="frm">
         <tr>
            <td><label>Enter Order Number</label></td>
            <td><input type="text" name="orderNumber" onkeyup="$('#ViewOrder>div>div').fadeOut();" /><input type="button" class="but1 m-side" value="OK" onclick="LoadMaterialOrder();"/></td>
            <td>
               <div class="process">&nbsp;</div>
            </td>
         </tr>
      </table>
      <div>
         <div class="border shadow m-tb">
            <h2 class="header">Order Details</h2>
            <div id="orderDetails" class="tab-content">
               <table class="frm">
                  <tr>
                     <td><label>Supplier</label></td>
                     <td><select id="newSupplier" name="supplier"></select></td>
                     <td class="r-align"><input type="button" value="Load Suppliers" onclick="loadSuppliers('#newSupplier')" /></td>
                  </tr>
                  <tr>
                     <td><label>Order Date</label></td>
                     <td><input type="text" name="orderDate" /></td>
                  </tr>
                  <tr>
                     <td><label>Delivery Date</label></td>
                     <td><input type="text" name="deliveryDate" /></td>
                  </tr>
                  <tr>
                     <td><label>Cancel Date</label></td>
                     <td><input type="text" name="cancelDate" /></td>
                  </tr>
                  <tr>
                     <td><label>Payment Due Mark</label></td>
                     <td><input id="payDue2" type="checkbox" name="isPayDue" /><label for="payDue2">Yes</label></td>
                  </tr>
                  <tr>
                     <td><label>Remember Mark</label></td>
                     <td><input id="remark2" type="checkbox" name="isMarked" /><label for="remark2">Yes</label></td>
                  </tr>
               </table>
            </div>
            <table class="footer-buttons">
               <tr>
                  <td>
                     <div class="msg"></div>
                     <div class="loader" style="display:none;"><img alt="loader" src="CSS/Images/loader.gif" /></div>
                  </td>
                  <td><input type="button" class="but1 sub-but" value="Save Changes" onclick=""/><input type="reset" value="Reset" /></td>
               </tr>
            </table>
         </div>
         <br />
         <div class="border shadow m-tb">
            <h2 class="header">Payment Records</h2>
            <div id="paymentHistory" class="tab-content">
               <table class="tab pay-his">
                  <tr class="th">
                     <td></td>
                     <td>Trans#</td>
                     <td>Date</td>
                     <td>Comment</td>
                     <td>Type</td>
                     <td>Credit</td>
                     <td>Debit</td>
                     <td>Balance</td>
                     <td>Associated Agent</td>
                  </tr>
                  <tr>
                     <td><input type="radio" name="paySelect" /></td>
                     <td>101-1</td>
                     <td>12-12-12</td>
                     <td>Abclk lask aa</td>
                     <td>Credit</td>
                     <td>500</td>
                     <td></td>
                     <td>500.00</td>
                     <td>Shashwat Tripathi</td>
                  </tr>
                  <tr>
                     <td><input type="radio" name="paySelect" /></td>
                     <td>101-2</td>
                     <td>12-12-12</td>
                     <td>Shashwat Tripathi</td>
                     <td>Debit</td>
                     <td></td>
                     <td>500</td>
                     <td>500.00</td>
                     <td>Sudhir</td>
                  </tr>
                  <tr>
                     <td><input type="radio" name="paySelect" /></td>
                     <td>101-3</td>
                     <td>12-12-12</td>
                     <td>Shashwat Tripathi</td>
                     <td>Credit</td>
                     <td>500</td>
                     <td></td>
                     <td>500.00</td>
                     <td>Sudhir Gaur</td>
                  </tr>
               </table>
               <br />
               <input type="button" class="but2" value="Edit" 
                  onclick="$('#ViewOrder #payEdit').slideDown(function () { $('html, body').animate({ scrollTop: $('#paymentHistory').offset().top-20 }, 500); });" /><input type="button" class="but2 m-side" value="Delete" />
               <div id="payEdit" class="border m-tb shadow" style="display:none;">
                  <h2 class="header">Edit Payment</h2>
                  <div class="tab-content">
                     <table class="frm">
                        <tr>
                           <td><label>Date</label></td>
                           <td><input type="text" name="date" placeholder="dd-mm-yy"/></td>
                        </tr>
                        <tr>
                           <td><label>Type</label></td>
                           <td>
                              <select name="type">
                                 <option>Credit</option>
                                 <option>Debit</option>
                                 <option>Expense</option>
                              </select>
                           </td>
                        </tr>
                        <tr>
                           <td><label>Amount</label></td>
                           <td><input type="text" name="amount" placeholder="धनराशी..." /></td>
                        </tr>
                        <tr>
                           <td><label>Comment</label></td>
                           <td><textarea name="comment" rows="4" cols="10"></textarea></td>
                        </tr>
                        <tr>
                           <td></td>
                           <td><input type="button" class="but1" value="Save Changes" /><input type="button" class="but2 m-side" onclick="$('#payEdit').slideUp();" value="Cancel" /></td>
                        </tr>
                     </table>
                  </div>
               </div>
               <br />
               <h2>Register New Payment</h2>
               <hr />
               <div id="newMatOrderPayment">
                  <table class="frm">
                     <tr>
                        <td><label>Date</label></td>
                        <td><input type="text" name="date" placeholder="dd-mm-yy" /></td>
                     </tr>
                     <tr>
                        <td><label>Type</label></td>
                        <td>
                           <select name="type">
                              <option>Credit</option>
                              <option>Debit</option>
                              <option>Expense</option>
                           </select>
                        </td>
                     </tr>
                     <tr>
                        <td><label>Amount</label></td>
                        <td><input type="text" name="amount" placeholder="धनराशी..." /></td>
                     </tr>
                     <tr>
                        <td><label>Comment</label></td>
                        <td><textarea name="comment" rows="4" cols="10"></textarea></td>
                     </tr>
                  </table>
               </div>
            </div>
            <table class="footer-buttons">
               <tr>
                  <td>
                     <div class="msg"></div>
                     <div class="loader" style="display:none;"><img alt="loader" src="CSS/Images/loader.gif" /></div>
                  </td>
                  <td><input type="button" class="but1" value="Register Payment" onclick=""/><input type="button" class="but2" onclick="$('#NewMatOrderPayment :text').val('');" value="Reset" /></td>
               </tr>
            </table>
         </div>
      </div>
   </div>
</div>
<div id="AddSupplier">
   <h2>Register New Suppiler</h2>
   <div class="tab-content">
      <table class="frm">
         <tr>
            <td><label>Supplier ID</label></td>
            <td><input type="text" name="supId" /></td>
         </tr>
         <tr>
            <td><label>Contact Number</label></td>
            <td><input type="text" name="contact" /></td>
         </tr>
         <tr>
            <td><label>Address</label></td>
            <td><textarea name="address" cols="10" rows="4"></textarea></td>
         </tr>
         <tr>
            <td><label>Email address</label></td>
            <td><input type="text" name="email" /></td>
         </tr>
         <tr>
            <td><label>City</label></td>
            <td><input type="text" name="city" /></td>
         </tr>
      </table>
   </div>
   <table class="footer-buttons">
      <tr>
         <td>
            <div class="msg"></div>
            <div class="loader" style="display:none;"><img alt="loader" src="CSS/Images/loader.gif" /></div>
         </td>
         <td><input type="button" class="but1 sub-but" value="Register" onclick="newSupplier();"/><input type="reset" value="रीसेट" /></td>
      </tr>
   </table>
</div>

如果我直接从FF和Firebug控制台调用此函数，则它会被调用。
但是在单击按钮时，我会收到错误 TypeError: newSupplier不是函数

如果需要更多代码，请问我。

- shashwat

---

从很明显的问题开始：您确定已将脚本添加到页面，并且确定在调用 newSupplier(); 之前它已加载？ 如果不是太长，也许可以发布一下HTML页面。 - Jude Fisher

你能提供HTML代码吗？也许你有一个ID为“newSupplier”的元素？ - user757095

@JcFx @CrisimIlNumenoreano 嗯...我在HTML中有一个select元素。对不起，我无法理解问题。 - shashwat

@CrisimIlNumenoreano 但是更改函数的名称或选择器的ID可能会导致更多的错误。有没有其他的方法..？？而且我有点困惑。如果我们不能直接使用类似于someId.someActionOrProperty的ID在JavaScript中访问HTML元素，那么为什么调用newSupplier()会与具有相同ID的元素发生冲突..？？ - shashwat

在IE中，我不确定FF和Chrome，但我认为是可以的，您可以使用someId.someActionOrProperty访问一些属性，但无法从FF控制台访问。仍然需要更改您的对象名称/ID。 - user757095

Answer 1

你的 HTML 代码中第一个 select 标签的 ID 是 newSupplier，就像函数名一样。有些浏览器可以通过在 JS 代码中指定 ID，然后 DOM 中定义的函数被元素覆盖来访问节点元素。

你需要重命名函数名或元素 ID。

- user757095

---

我刚遇到了一个类似的问题，尽管在我的情况下，我有一个与HTML div id相同名称的变量（而不是函数）。 - bdf