当设置表单值时，JQuery val（）抛出运行时错误

Question

我是Javascript/JQuery的新手，所以如果我缺少一些简单的东西，请致歉。我试图制作一个按钮来计算单位价格的数量总计，然后填充总计字段的结果。这是在ASP.NET MVC3中使用VS2010完成的。

我的代码似乎拉取了SpoilageQuantity和SpoilageUnitPrice的值OK，但是无法设置SpoilageTotalPrice的值。该错误说，我试图给函数结果赋值，但我的理解是val（）可以用来获取和设置表单字段值。更正或建议？

VS2010视图：

<div class="editor-label"> 
    @Html.LabelFor(model => model.SpoilageQuantity) 
</div> 
<div class="editor-field"> 
    @Html.EditorFor(model => model.SpoilageQuantity) 
    @Html.ValidationMessageFor(model => model.SpoilageQuantity) 
</div> 

<div class="editor-label"> 
    @Html.LabelFor(model => model.SpoilageUnitPrice) 
</div> 
<div class="editor-field"> 
    @Html.EditorFor(model => model.SpoilageUnitPrice) 
    @Html.ValidationMessageFor(model => model.SpoilageUnitPrice) 
</div> 

<div class="editor-label"> 
    @Html.LabelFor(model => model.SpoilageTotalPrice) 
</div> 
<div class="editor-field"> 
    @Html.EditorFor(model => model.SpoilageTotalPrice) 
    @Html.ValidationMessageFor(model => model.SpoilageTotalPrice) 
    <input type="button" value="Calculate" onclick="calculateTotal()" /> 
</div> 

JS文件：

function calculateTotal() { 
// calculate total spoilage price from unit price and quantity 
var totalprice = $('#SpoilageQuantity').val() * $('#SpoilageUnitPrice').val(); 
totalprice = totalprice.toFixed(2); 

$('#SpoilageTotalPrice').val(totalprice); 
} 

渲染HTML：

<div class="editor-label"> 
     <label for="SpoilageQuantity">Item Quantity</label> 
    </div> 
    <div class="editor-field"> 
     <input class="text-box single-line" data-val="true" data-val-number="The field Item Quantity must be a number." data-val-required="Quantity of item lost is required." id="SpoilageQuantity" name="SpoilageQuantity" type="text" value="0.00" /> 
     <span class="field-validation-valid" data-valmsg-for="SpoilageQuantity" data-valmsg-replace="true"></span> 
    </div> 

    <div class="editor-label"> 
     <label for="SpoilageUnitPrice">Unit Price</label> 
    </div> 
    <div class="editor-field"> 
     <input class="text-box single-line" data-val="true" data-val-number="The field Unit Price must be a number." data-val-required="Unit price is required." id="SpoilageUnitPrice" name="SpoilageUnitPrice" type="text" value="0.00" /> 
     <span class="field-validation-valid" data-valmsg-for="SpoilageUnitPrice" data-valmsg-replace="true"></span> 
    </div> 

    <div class="editor-label"> 
     <label for="SpoilageTotalPrice">Total Price</label> 
    </div> 
    <div class="editor-field"> 
     <input class="text-box single-line" data-val="true" data-val-number="The field Total Price must be a number." data-val-required="The Total Price field is required." id="SpoilageTotalPrice" name="SpoilageTotalPrice" type="text" value="0.00" /> 
     <span class="field-validation-valid" data-valmsg-for="SpoilageTotalPrice" data-valmsg-replace="true"></span> 
     <input type="button" value="Calculate" onclick="calculateTotal()" /> 
    </div> 

错误消息：

Microsoft JScript runtime error: Cannot assign to a function result 

编辑：整个js文件：

/* Copyright 2012 Tom Barrett 

This file is part of PFC Logs. 

PFC Logs is free software: you can redistribute it and/or modify 
it under the terms of the GNU General Public License as published by 
the Free Software Foundation, either version 3 of the License, or 
(at your option) any later version. 

PFC Logs is distributed in the hope that it will be useful, 
but WITHOUT ANY WARRANTY; without even the implied warranty of 
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 
GNU General Public License for more details. 

You should have received a copy of the GNU General Public License 
along with PFC Logs. If not, see <http://www.gnu.org/licenses/>. 
*/ 

function autoFocus() { 
    // Auto-focus on the first text field upon page load. 
    $("input[type=text]").first().focus(); 
} 

function calculateTotal() { 
    // calculate total from quantity & unit price 
    var totalprice = $('#SpoilageQuantity').val() * $('#SpoilageUnitPrice').val(); 
    totalprice = totalprice.toFixed(2); 
    $("#SpoilageTotalPrice").val(totalprice); 
} 

Answer 1

我不知道的技术性......但我也遇到过这个。如果我的函数是在一个单独的js文件中，我链接到我的标签jquery（或Jscript为此）无法找到元素。如果我在标签中包含脚本，那么一切正常。