Question

我正在尝试运行一个基于onblur事件填充文本框的计算。出于某种原因，我的结果是显示NaN。我不习惯JS，所以任何帮助都会受到赞赏。

注意：我最积极地处理最后一个函数 - markupNumCheck（），因为一旦这个函数工作，我可以简单地将它应用到其他两个函数。

这是JS：

function unitToSales(){
    var unitPrice = document.getElementById("inputCost");
    var percentMarkup = document.getElementById("inputMarkup");
    var salesPrice = document.getElementById("inputPrice");

    parseInt(unitPrice.value);
    parseInt(percentMarkup.value);
    parseInt(salesPrice.value);

    if(unitPrice.value != "" && percentMarkup.value != "" ){
         salesPrice.value = (unitPrice * (1+percentMarkup));
     }

}

function salesToUnit(){

    var unitPrice = document.getElementById("inputCost");
    var percentMarkup = document.getElementById("inputMarkup");
    var salesPrice = document.getElementById("inputPrice");

    parseInt(unitPrice.value);
    parseInt(percentMarkup.value);
    parseInt(salesPrice.value);

    if(percentMarkup.value != "" && salesPrice.value != "" ){
         unitPrice.value = parseInt(unitPrice * (1+percentMarkup));
     }
}

function markupNumCheck(){
    var unitPrice = document.getElementById("inputCost");
    var percentMarkup = document.getElementById("inputMarkup");
    var salesPrice = document.getElementById("inputPrice");

    parseInt(unitPrice.value);
    parseInt(percentMarkup.value);
    parseInt(salesPrice.value);

    if(unitPrice.value != "" && percentMarkup.value != "" ){
         salesPrice.value = (unitPrice * (1+percentMarkup));
    } else if (percentMarkup.value != "" && salesPrice.value != "" ){
         unitPrice.value = (unitPrice * (1+percentMarkup));
    }
}

这是我调用代码的HTML：注意：这显然是一种形式，我没有复制整个文件，因为其余部分是无关紧要的。

<div class="form-row">
    <div class="form-group col-md-3">
        <div class="form-group">
            <label for="inputCost">Unit Cost</label>
            <input type="text" class="form-control" id="inputCost" name="inputCost" onblur="unitToSales()" value="">
        </div>
    </div>
    <div class="form-group col-md-3">
        <div class="form-group">
            <label for="inputMarkup">Percent Markup</label>
            <input type="text" class="form-control" id="inputMarkup" name="inputMarkup" onblur="markupNumCheck()">
        </div>
    </div>
    <div class="form-group col-md-3">
        <div class="form-group">
            <label for="inputCost">Sales Price</label>
            <input type="text" class="form-control" id="inputPrice" name="inputPrice" onblur="salesToUnit()">
        </div>
    </div>
    <div class="form-group col-md-3">
        <div class="form-group">
            <label for="inputQuantity">Quantity</label>
            <input type="text" class="form-control" id="inputQuantity" >
        </div>
    </div>
</div>

再次感谢大家提供的任何帮助。

Answer 1

parseInt将返回已解析的整数值。当您调用parseInt(value)并且不将值分配给变量时，解析的值就会被丢弃。您之后使用变量unitPrice作为数字，但它实际上包含DOM元素，这就是您获得NaN的原因。

您可以通过在表达式中内联parseInt调用来修复它：

salesPrice.value = (parseInt(unitPrice.value) * (1+parseInt(percentMarkup)));

Answer 2

您需要将每个变量分配给parseInt结果。

例如，您重复使用unitPrice变量并将其分配给parseInt结果

var unitPrice = document.getElementById("inputCost");

unitPrice = parseInt(unitPrice);

Answer 3

我注意到，每当您尝试使用parseInt时，您都不会像这样保存结果：

var resultInt = parseInt(SomeString);

因此，当您尝试一起计算您的值时，您会得到NaN因为它们仍然是字符串形式。

如果您在 salesToUnit（）中查看 if-statement ：

if(percentMarkup.value != "" && salesPrice.value != "" ){
     unitPrice.value = parseInt(unitPrice * (1+percentMarkup));
 }

unitPrice和percentMarkup未被解析为整数，因此您要将1（整数）添加到percentMarkup（一个字符串），然后将其乘以{{1 （也是一个字符串）和那么解析结果，为您提供unitPrice并将其设置为NaN。

我想补充说明在 salesToUnit（）开头发生的unitPrice.value调用似乎是不必要的，因为parseInt和{{{ 1}}并且在你检查之后会更好。我会像这样翻转它并将 salesToUnit（）改为：

percentMarkup

同时加入 @Vitalii 提及的SalesPrice功能也会更安全！

我希望你觉得这很有用！

JavaScript parseInt转换

3 个答案: