如何将值传递给 JavaScript 中的 function？

Question

I have this code that changes the value of a variable called "factor" based upon a dropdown list selection:

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;
      }

Then, I have this function that is supposed to use the variable called "factor" in a calculation based upon another (different) dropdown list selection:

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}`;

I keep getting NaN as the result. How do I use the value in the variable called "factor" in the calculate(); function?

Answer 1

Since there there was no HTML posted, the example has an optimal layout which includes:

• <form> - always wrap everything in a <form> if there is more than one form control
• <input type='range'> for the days
• 2 <output> - one to display number of days and one to display saved
• <input type='number'> for price

Details are commented in example

 // 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

You can move factor variable to the outer scope that will share among functions

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;
      }

Now factor is visible in calculate , but you have another problem with your calculation is nopages.value . That value is possibly a string which cannot proceed number operations, so you need to convert it to a number by 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}`;

Answer 3

The factor variable is declared local to the sel change event, so is not visible in the psel event. You need to declare the factor variable outside of the event methods, or save to a hidden input type in sel, and get it from hidden input in psel. Plus you just need the one var declaration, in the switch you don't need the var keyword, since factor has already been declared (var factor = 0)

In html

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

at bottom of sel

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

In psel

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

or just declare

var factor = 0 

outside of the events (depending how your code is structured)