![](/img/trans.png)
[英]Javascript: How do I pass the value (not the reference) of a variable to a function?
[英]How do I pass a value to a function in JavaScript?
我有這段代碼可以根據下拉列表選擇更改名為“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;
}
然后,我有這個 function,它應該在基於另一個(不同的)下拉列表選擇的計算中使用名為“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() 中使用名為“factor”的變量中的值; function?
由於沒有發布 HTML,該示例具有最佳布局,其中包括:
<form>
- 如果有多個表單控件,則始終將所有內容包裝在<form>
中<input type='range'>
days
<output>
- 一個顯示days
,一個顯示saved
<input type='number'>
price
詳細信息在示例中進行了注釋
// 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: <input id='days' type='range' min='3' max='15' step='1' value='3'> <output id='view' value='3'></output> Days </label> <label>Price: <input id='price' type='number' min='.01' step='any' value='.01'> </label> <label>Savings: <output id='saved'></output> </label> </form>
您可以將factor
變量移動到將在函數之間共享的外部 scope
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}`;
因子變量被聲明為 sel 更改事件的局部變量,因此在 psel 事件中不可見。 您需要在事件方法之外聲明因子變量,或者保存到sel中的隱藏輸入類型,並從psel中的隱藏輸入中獲取它。 另外,您只需要一個 var 聲明,在 switch 中您不需要 var 關鍵字,因為已經聲明了 factor (var factor = 0)
在 html
<input type="hidden id ="factor"/>
在 sel 的底部
document.getElementById("factor").value = factor;
在psel中
var factor = document.getElementById("factor").value
或者只是聲明
var factor = 0
在事件之外(取決於您的代碼的結構)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.