如何将值传递给JavaScript中的函数?

Question

我有这段代码来改变一个名为"factor"的变量的值基于下拉列表选择:

sel.addEventListener("change", function (evt) {
var days = parseInt(evt.target.options[evt.target.selectedIndex].value);
var factor = 0;
switch (days) {
case 3: case 4: var factor = 1.5; break;
case 5: case 6: var factor = 1.4; break;
case 7: case 8: case 9: var factor = 1.3; break;
case 10: case 11: case 12: case 13: case 14: var factor = 1.2; break;
case 15: default: var factor = 1.0;
}

然后，我有这个函数，它应该使用变量"factor"在基于另一个(不同的)下拉列表选择的计算中:

psel.addEventListener("change", function (evt) {});
function calculate (pfactor){
var nopages = document.getElementById("pages");
var priceOutput = document.getElementById("nopagesOutput");
var pfactor = document.getElementById("factorOutput");
priceOutput.innerHTML = nopages.value;
var total = nopages.value * 10 * factor;
document.getElementById("savings").innerHTML = `$ ${total}`;

我一直得到NaN作为结果。如何使用变量"因子"中的值?在calculate();函数?

Answer 1

由于没有发布HTML，该示例具有最佳布局，其中包括:

• <form>-如果有多个表单控件，总是将所有内容包装在<form>中
• <input type='range'>为days
• 2个<output>-一个显示days的数量，一个显示saved
<input type='number'>forprice

在示例中注释了详细信息

// Reference the <form>
const form = document.forms[0];
// Initialize output.view
form.elements.view.value = '3';
// Bind the <form> to the "input" event
form.addEventListener("input", function (evt) {
// Reference all form controls
const IO = this.elements;
let factor; // Declare factor
let price = +IO.price.value // Get price as a number
let days = +IO.days.value; // Get days as a number
IO.view.value = days; // Display number of days
switch(days) {
case 3: case 4: factor = 1.5; break;
case 5: case 6: factor = 1.4; break;
case 7: case 8: case 9: factor = 1.3; break;
case 10: case 11: case 12: case 13: case 14: factor = 1.2; break;
case 15: default: factor = 1.0;
}
// Call calculate - pass 2 numbers and a HTMLCollection
calculate(factor, price, IO);
});
function calculate(factor, price, IO) {
// Calculate parameters into a string with 2 decimals
const total = (factor * price * 10).toFixed(2);
// Display calculation
IO.saved.value = '$'+total;
}

label {
display: block;
margin-bottom: 12px;
}
input {
font: inherit;
}
#days {
vertical-align: sub;
}
#price {
width:9ch; 
text-align: right;
}

<form>
<label>Factor:&nbsp;
<input id='days' type='range' min='3' max='15' step='1' value='3'>
&nbsp;<output id='view' value='3'></output> Days
</label>
<label>Price:&nbsp;
<input id='price' type='number' min='.01' step='any' value='.01'>
</label>
<label>Savings:&nbsp;
<output id='saved'></output>
</label>
</form>

Answer 2

factor变量是在psel事件中声明的，因此在psel事件中不可见。您需要在事件方法之外声明因子变量，或者保存到sel中的隐藏输入类型，然后从psel中的隐藏输入获取它。再加上你只需要一个var声明，在切换中你不需要var关键字，因为因子已经被声明了(var因子= 0)

在html

<input type="hidden id ="factor"/>

document.getElementById("factor").value = factor;

在psel

var factor = document.getElementById("factor").value 

或者直接声明

var factor = 0 

事件之外的(取决于代码的结构)

Answer 3

可以将factor变量移到函数之间共享的外部作用域

var factor = 0; //move `factor` from the function scope to the global scope
sel.addEventListener("change", function (evt) {
var days = parseInt(evt.target.options[evt.target.selectedIndex].value);
//var factor = 0; //remove this
switch (days) {
case 3: case 4: var factor = 1.5; break;
case 5: case 6: var factor = 1.4; break;
case 7: case 8: case 9: var factor = 1.3; break;
case 10: case 11: case 12: case 13: case 14: var factor = 1.2; break;
case 15: default: var factor = 1.0;
}

现在factor是可见的calculate，但你有另一个问题与你的计算是nopages.value。该值可能是一个不能进行数字操作的字符串，因此需要通过Number(nopages.value)

将其转换为数字。

function calculate (pfactor){
var nopages = document.getElementById("pages");
var priceOutput = document.getElementById("nopagesOutput");
var pfactor = document.getElementById("factorOutput");
priceOutput.innerHTML = nopages.value;
var total = Number(nopages.value) * 10 * factor;
document.getElementById("savings").innerHTML = `$ ${total}`;