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

Question

我尝试使用一个函数的产品，以便稍后在我的程序中使用。

我有以下代码：

var calculate = function(ingVolume, percentCarrier, totalCarrierVolume, totalIngredientVolume) {
    var volume = document.getElementById(ingVolume).value;
    var carrier = document.getElementById(percentCarrier).value;
    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() {
    document.getElementById("demo").innerHTML = value1;
};

如果我将一些数字插入并运行它，变量＆＃39; value1＆＃39;以undefined的形式返回。但是，当我在javascript控制台中运行计算（＆＃39; a＆＃39;，＆＃39; b＆＃39;，＆＃39; c＆＃39;，＆＃39; d＆＃39;）时，它运行良好并返回这些参数的[x值，y值]。

确切的错误消息是

  

＆＃34;未捕获的TypeError：无法读取属性＆＃39;值＆＃39; of null＆＃34;对于第17行

是var volume = document.getElementById(ingVolume).value;

正在运行以下html：

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

<p id="demo"></p>

我希望最终使用subvalue1_1和subvalue1_2进行其他功能的额外计算，但如果没有为value1存储值，它将无法工作。

html出现在javascript之后，它位于html文档的头部。

Answer 1

如果尚未输入值，则需要为数字变量指定默认值。在这个片段中正常工作。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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.');
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;