使用参数调用函数的变量未定义

如果尚未输入值，则需要为数值变量指定默认值。 在此代码段中工作正常。

 var calculate = function(ingVolume, percentCarrier, totalCarrierVolume, totalIngredientVolume) {
   
       // added  || 0 here.  if the value of the textbox is empty, this will default the variables to 0 instead.
		var volume = document.getElementById(ingVolume).value || 0;
		var carrier = document.getElementById(percentCarrier).value || 0;
		var mCarrier = carrier/100;
		
		var x = document.getElementById(totalCarrierVolume).innerHTML = mCarrier*(volume/(1-   
        mCarrier));
		var y = document.getElementById(totalIngredientVolume).innerHTML = parseInt(volume) + x;
		
		return [x, y];
    };
    var value1 = calculate('a', 'b', 'c', 'd');
    var subvalue1_1 = value1[0];
    var subvalue1_2 = value1[1];

    <form name="testing">
    <table border="1" style="padding: 5px;">
	<tr>
		<td>Ingredient Name</td>
		<td>Amount (in Mg)</td>
		<td>% Carrier</td>
		<td></td>
		<td>Total Carrier Volume</td>
		<td>Total Ingredient Volume</td>
	</tr>
	<tr>
		<td><input type="text"></input></td>
		<td><input type="number" id="a"> Mg</input></td>
		<td><input type="number" id="b"></input> %</td>
		<td><button type="button" onclick="calculate('a', 'b', 'c', 'd')">Calculate Final     
         Volume</button></td>
		<td id="c"></td>
		<td id="d"></td>
		<td><a href="#" onclick="toggleRow('row2')">New Ingredient</a></td>
	</tr>
    </table>
    </form>

编辑：这是一个与OP更新的代码示例相匹配的新代码片段。 请注意，要使按钮单击工作，在计算value1之前，这些值必须位于文本框中。 请注意，此计算实际上应该在将值放入段落之前执行。单击No, Click Me...按钮以查看它实时工作（仅适用于value1，就像您的代码所做的那样）。

var calculate = function(ingVolume, percentCarrier, totalCarrierVolume, totalIngredientVolume) {
    var volume = document.getElementById(ingVolume).value || 0;
    var carrier = document.getElementById(percentCarrier).value || 0;
    var mCarrier = carrier/100;
    var x = document.getElementById(totalCarrierVolume).innerHTML = mCarrier*(volume/(1-   
    mCarrier));
    var y = document.getElementById(totalIngredientVolume).innerHTML = parseInt(volume) + x;
    return [x, y];
};
var value1 = calculate('a', 'b', 'c', 'd');
var subvalue1_1 = value1[0];
var subvalue1_2 = value1[1];
var value2 = calculate('e', 'f', 'g', 'h');
var subvalue2_1 = value2[0];
var subvalue2_2 = value2[1];
var value3 = calculate('i', 'j', 'k', 'l');
var subvalue3_1 = value3[0];
var subvalue3_2 = value3[1];
var value4 = calculate('m', 'n', 'o', 'p');
var subvalue4_1 = value4[0];
var subvalue4_2 = value4[1];
var value5 = calculate('q', 'r', 's', 't');
var subvalue5_1 = value5[0];
var subvalue5_2 = value5[1];
function calculate2() {
    // added the || 0 here, too. 
    document.getElementById("demo").innerHTML = value1 || 0;
};
function thisIsHowCalculate2ShouldLook(){
  value1 = calculate('a', 'b', 'c', 'd');
  document.getElementById("demo").innerHTML = value1 || 0;
}
function toggleRow(id){
  document.getElementById(id).style.display = document.getElementById(id).style.display === 'none' ? 'table-row' : 'none';
}
function noMoreRows(){
  alert('no more rows can be added-- script is not dynamic, yet.');
}

<form name="testing">
<table border="1" style="padding: 5px;">
<tr>
    <td>Ingredient Name</td>
    <td>Amount (in Mg)</td>
    <td>% Carrier</td>
    <td></td>
    <td>Total Carrier Volume</td>
    <td>Total Ingredient Volume</td>
</tr>
<tr>
    <td><input type="text"></input></td>
    <td><input type="number" id="a" /> Mg</td>
    <td><input type="number" id="b" /> %</td>
    <td><button type="button" onclick="calculate('a', 'b', 'c', 'd')">Calculate Final     
     Volume</button></td>
    <td id="c"></td>
    <td id="d"></td>
    <td><a href="#" onclick="toggleRow('row2')">New Ingredient</a></td>
</tr>
<tr id="row2" style="display: none;">
    <td><input type="text"></input></td>
    <td><input type="number" id="e"> Mg</input></td>
    <td><input type="number" id="f"></input> %</td>
    <td><button type="button" onclick="calculate('e', 'f', 'g', 'h')">Calculate Final 
     Volume</button></td>
    <td id="g"></td>
    <td id="h"></td>
    <td><a href="#" onclick="toggleRow('row3')">New Ingredient</a></td>
    <td><a href="#" onclick="toggleRow('row2')">Delete Ingredient</a></td>
</tr>
<tr id="row3" style="display: none;">
    <td><input type="text"></input></td>
    <td><input type="number" id="i"> Mg</input></td>
    <td><input type="number" id="j"></input> %</td>
    <td><button type="button" onclick="calculate('i', 'j', 'k', 'l')">Calculate Final 
     Volume</button></td>
    <td id="k"></td>
    <td id="l"></td>
    <td><a href="#" onclick="toggleRow('row4')">New Ingredient</a></td>
    <td><a href="#" onclick="toggleRow('row3')">Delete Ingredient</a></td>
</tr>
<tr id="row4" style="display: none;">
    <td><input type="text"></input></td>
    <td><input type="number" id="m"> Mg</input></td>
    <td><input type="number" id="n"></input> %</td>
    <td><button type="button" onclick="calculate('m', 'n', 'o', 'p')">Calculate Final 
     Volume</button></td>
    <td id="o"></td>
    <td id="p"></td>
    <td><a href="#" onclick="toggleRow('row5')">New Ingredient</a></td>
    <td><a href="#" onclick="toggleRow('row4')">Delete Ingredient</a></td>
</tr>
<tr id="row5" style="display: none;">
    <td><input type="text"></input></td>
    <td><input type="number" id="q"> Mg</input></td>
    <td><input type="number" id="r"></input> %</td>
    <td><button type="button" onclick="calculate('q', 'r', 's', 't')">Calculate Final    
    Volume</button></td>
    <td id="s"></td>
    <td id="t"></td>
    <td><a href="#" onclick="noMoreRows()">New Ingredient</a></td>
    <td><a href="#" onclick="toggleRow('row5')">Delete Ingredient</a></td>
</tr>
</table>
</form>
<button type="button" onclick="calculate2()">Click Me</button>
<button type="button" onclick="thisIsHowCalculate2ShouldLook()">No, Click Me To See It Work</button>
<p id="demo"></p>