javascript - 数学和表单字段，得到 NaN

Question

我正在根据旁边表单中的用户输入更新收据。

我的问题是我认为我正在处理文本值而不是整数，因为我在 NaN 中做一些数学运算，而它们与 console.log 分开显示就好了

我收集了三个值，然后尝试将它们相乘以显示在收据中。这将返回 NaN。

到目前为止的代码：

$('fieldset').on('change', function(){

    group = $(this).attr('title');

    switch(group){
        case "dr":
            var name = $(this).find('option:selected').attr('label');
            var value = $(this).find('option:selected').attr('value');
            var weeks = $(this).find('option:selected').attr('data-weeks');
            var copies = $(this).find('input').val();

            //Only update the receipt when both are set (separate fields)           
            if(name != "" && copies != ""){
                produkter.push([name, value*weeks*copies]);
                receipt(produkter);
        }

        break;

        [other cases...]
    }

// Accepts an array with a name and a price sum.
function receipt(produkter){
    produkter.sort();

    $('.receipt li').remove(); // Clears the current receipt.

    for (var i = 0; i < produkter.length; i++) {
        $('.kvitto').append(
                '<li><span class="item">' + produkter[i][0] + '</span><span class="price">' + produkter[i][1] + '</span></li>');
    }

    console.log(produkter);
}

<fieldset title="dr">

    <label>DR format</label>
    <select>
        <option selected label="dr16" data-weeks="52" value="0,327">
            DR 16 sides</option>
        <option label="dr8" data-weeks="52" value="0,214">
            DR 8 Tab</option>
        <option label="drFF" data-weeks="52" value="0,352">
            DR Full format</option>
    </select>

    <br><br>

    <label>DR Copies</label>
    <input type="text" label="dr-copies" />

</fieldset>

Answer 1

您确实是从attr函数中获取字符串值。您需要将它们转换为整数，如下所示：

produkter.push([name, +value * +weeks * +copies]);

基本示例

或者，您可以使用parseInt，尽管它不是那么简洁：

produkter.push([name, parseInt(value, 10) * parseInt(weeks, 10) * parseInt(copies, 10)]);

此外，您需要通过为变量分配默认值来满足不可用的属性或值，如下所示：

var name = $(this).find('option:selected').attr('label') || 0;
var value = $(this).find('option:selected').attr('value') || 0;
var weeks = $(this).find('option:selected').attr('data-weeks') || 0;
var copies = $(this).find('input').val() || 0;

Answer 2

这行代码 .val() 将返回一个字符串/null 或一个数组，给你一个 NaN(Not a Number)

var copies = $(this).find('input').val();