Javascript 为什么每次运行函数时都会替换提供的参数值？

**我的目标**是让用户单击提供的按钮，每个按钮都绑定一个数值，然后在每次单击按钮时重新计算总数

**我的问题**是每次选择一个按钮并重新计算总数时，calculateTotalPrice的一个参数将替换为默认值0。如果两个参数（chosenStyle和ChosenColors）都给定了值，那么我只希望程序使用提供的值（而不是默认值）

我希望每一类纽扣（“T恤风格”和“#印刷颜色”）只增加一次总数。例如，如果选择按钮“T”（值为10）并选择按钮“1”（值为3），则总数应为13

如果尚未从每个类别中选择任何按钮，则程序应假定默认值为0。如果选择了两个按钮，则程序应使用提供的值（在同一示例中，totalPrice=10+3（13））

当我使用默认值时，只会应用一个按钮值。如果我不使用默认值，则每次计算totalPrice时都会给出NaN

我觉得这应该很简单。哈哈。我是一个JavaScript新手，阅读了大约50篇不同的在线文章，找到了计算总数的最佳方法，但没有用

以下是我的jQuery代码：

// Initialize totalPrice variable and display to user
var totalPrice = 0;
$('.total-price').html('Total Price = ' + '$' + totalPrice);

// Calculate total price
function calculateTotalPrice (chosenStyle = 0, chosenColours = 0) {
    totalPrice = chosenStyle + chosenColours;
    $('.total-price').html('Total Price = ' + '$' + totalPrice);
}


/* *** Complete T-Shirt Style steps *** */

var calculateStylePrice = function () {

    // Get selected T-Shirt Style button and store in variable
    var tshirtStyle = $(this);

    // Change style of selected button
    $(this).toggleClass('button--clicked');

    // Get selected T-Shirt Style value and store in variable
    var chosenStyle = $(this).val();

    // Initialize chosenStylePrice to hold price of chosen style
    var chosenStylePrice = 0;

    // Add price of selected T-Shirt Style to chosenStylePrice variable
    if (chosenStyle == 'tee') {
        chosenStylePrice = 10;
    }
    if (chosenStyle == 'ladies') {
        chosenStylePrice = 12;
    }
    if (chosenStyle == 'long') {
        chosenStylePrice = 14;
    }
    if (chosenStyle == 'hood') {
        chosenStylePrice = 30;
    }

    // Output selected T-Shirt Style to user
    $('.chosen-style').html('T-Shirt Style = ' + chosenStyle + ' ($' + chosenStylePrice + ')');

    // Add chosenStylePrice price to totalPrice
    calculateTotalPrice(chosenStylePrice);
};

// Bind calculateStylePrice click event to T-Shirt Style buttons
$('[id^=style]').on('click', calculateStylePrice);


/* *** Complete T-Shirt Style steps *** */

var calculateColoursPrice = function () {

    // Get selected # of Colours and store in variable
    var colourNumber = $(this);

    // Change style of selected button
    $(this).toggleClass('button--clicked');

    // Get selected # of Colours value and store in variable
    var chosenColours = $(this).val();

    // Initialize chosenStylePrice to hold price of chosen style
    var chosenColoursPrice = 0;

    // Add price of selected # of Colours to chosenColoursPrice variable
    if (chosenColours == 1) {
        chosenColoursPrice = 3;
    }
    if (chosenColours == 2) {
        chosenColoursPrice = 5;
    }
    if (chosenColours == 3) {
        chosenColoursPrice = 7;
    }
    if (chosenColours == 4) {
        chosenColoursPrice = 9;
    }
    if (chosenColours == 5) {
        chosenColoursPrice = 11;
    }
    if (chosenColours == 6) {
        chosenColoursPrice = 13;
    }

    // Output selected # of Colours to user
    $('.chosen-colours').html('# of Print Colours = ' + chosenColours + ' ($' + chosenColoursPrice + ')');

    // Add chosenColoursPrice price to totalPrice
    calculateTotalPrice(chosenColoursPrice);
};

// Bind calculateColoursPrice click event to # of Print Colours buttons
$('[id^=colour]').on('click', calculateColoursPrice);

以下是我的HTML代码：

<div class="options">
    <div class="option-container">
        <h3>T-Shirt Style</h3>
        <button id="style-tee" class="button button-rectangle" value="tee">Tee</button>
        <button id="style-ladies" class="button button-rectangle" value="ladies">Ladies</button>
        <button id="style-long" class="button button-rectangle" value="long">Long</button>
        <button id="style-hood" class="button button-rectangle" value="hood">Hood</button>
    </div><!--option-container-->

    <div class="option-container">
        <h3># of Print Colours</h3>
        <button id="colour-1" class="button button-circle" value="1">1</button>
        <button id="colour-2" class="button button-circle" value="2">2</button>
        <button id="colour-3" class="button button-circle" value="3">3</button>
        <button id="colour-4" class="button button-circle" value="4">4</button>
        <button id="colour-5" class="button button-circle" value="5">5</button>
        <button id="colour-6" class="button button-circle" value="6">6</button>
    </div><!--option-container-->

    <div class="option-container">
        <h3>Quantity</h3>
        <select id="quantity" class="button" name="quantity">
            <option value="10to14">10 to 14</option>
            <option value="15to19">15 to 19</option>
            <option value="20to24">20 to 24</option>
            <option value="25to29">25 to 29</option>
            <option value="30to39">30 to 29</option>
            <option value="40to49">40 to 49</option>
            <option value="50to74">50 to 74</option>
            <option value="75to99">75 to 99</option>
            <option value="100plus">100+</option>
        </select>
    </div><!--option-container-->
</div><!--options-->


<div class="quote">
<p class="chosen-style"></p>
<p class="chosen-colours"></p>
<p class="chosen-quantity"></p>
<p class="total-price"></p>
</div><!--quote-->

T恤款式
球座
女厕所
长的
罩
#印刷色彩
1.
2.
3.
4.
5.
6.
量
10至14
15至19
20至24
25至29
30至29
40至49
50至74
75至99
100+

您的

calculateTotalPrice

函数使用了两个参数，但您从未为函数调用提供两个参数

当您拥有

calculateTotalPrice（chosenStyle=0，ChosenColors=0）

并传递

calculateTotalPrice（anyVariable）

时，您将在通过函数的过程中实际设置

chosenStyle=anyVariable，ChosenColors=0

您可以像

calculateTotalPrice（chosenStyle，0）

那样调用它，然后稍后再调用

calculateTotalPrice（0，ChosenColors）

，这会将适当的变量设置为所需的输入，但您仍然会计算错误，因为这仍然会将其中一个值设置为

0

相反，每次都需要传递相反下拉列表的当前值。

这可能会对您有所帮助

//初始化totalPrice变量并显示给用户
var totalPrice=0；
var chosencolorsprice=0；
var chosenStylePrice=0；
$（'.total price'）.html（'total price='+'$'+totalPrice）；
//计算总价
函数calculateTotalPrice（）{
总价=chosenStylePrice+chosenColoursPrice；
$（'.total price'）.html（'total price='+'$'+totalPrice）；
}
/****完整的T恤风格步骤****/
var calculateStylePrice=函数（）{
//获取所选T恤样式按钮并存储在变量中
var tshirtStyle=$（此项）；
//更改所选按钮的样式
$（this.toggleClass（'button--clicked'）；
//获取所选T恤样式值并存储在变量中
var chosenStyle=$（this.text（）；
//初始化chosenStylePrice以保持所选样式的价格
chosenStylePrice=0；
//将所选T恤款式的价格添加到chosenStylePrice变量
如果（chosenStyle=='tee'）{
chosenStylePrice=10；
}
如果（chosenStyle==‘女士’）{
chosenStylePrice=12；
}
if（chosenStyle=='long'）{
chosenStylePrice=14；
}
如果（chosenStyle=='hood'）{
chosenStylePrice=30；
}
//将所选T恤款式输出给用户
$（'.selected style'）.html（'T-Shirt style='+chosenStyle+'（$'+chosenStylePrice+'））；
//将chosenStylePrice添加到totalPrice
计算总价（chosenStylePrice）；
};
//将calculateStylePrice单击事件绑定到T恤样式按钮
$（'id^=style]'）。在（'click'，calculateStylePrice）上；
/****完整的T恤风格步骤****/
var calculateColoursPrice=函数（）{
//选择颜色并储存在变量中
var colorNumber=$（此）；
//更改所选按钮的样式
$（this.toggleClass（'button--clicked'）；
//选择颜色值并存储在变量中
var chosencolors=parseInt（$（this.text（））；
//初始化chosenStylePrice以保持所选样式的价格
ChosenColorSprice=0；
//将选定颜色的价格添加到chosenColoursPrice变量中
如果（选择颜色==1）{
ChosenColorSprice=3；
}
如果（选择颜色==2）{
ChosenColorSprice=5；
}
如果（选择颜色==3）{
ChosenColorSprice=7；
}
如果（选择颜色==4）{
ChosenColorSprice=9；
}
如果（选择颜色==5）{
ChosenColorSprice=11；
}
如果（选择颜色==6）{
ChosenColorSprice=13；
}
//将选定的颜色输出给用户
$（'.selected colors'）.html（“#of Print colors='+chosencolors+”（$'+chosencolorsprice+）”）；
//将ChosenColor Sprice价格添加到总价中
计算总价格（）；
};
//将CalculateColor价格点击事件绑定到打印颜色按钮的#
$（“[id^=color]”）。在（'click'，calculateColoursPrice）；

。按钮{
背景色：#4CAF50；
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
光标：指针；
}