2014-12-02 6 views
-1

내 프로그램에서 나중에 사용할 함수 하나를 사용하려고합니다.매개 변수가있는 함수를 호출하는 변수가 정의되지 않았습니다.

나는 다음과 같은 코드가 있습니다

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

것은 나는이에 몇 가지 숫자를 연결하고 그것을 실행하는 경우를 변수 '값 1'은 정의로 반환됩니다. 그러나 자바 스크립트 콘솔에서 calculate ('a', 'b', 'c', 'd')를 실행하면 잘 실행되고 해당 매개 변수에 대해 [x 값, y 값]을 반환합니다. 나는 결국에 대한 subvalue1_1 및 subvalue1_2를 사용하려면

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

:

정확한 오류 메시지는 다음과 HTML에 대한 var volume = document.getElementById(ingVolume).value;

그것은되고있는 실행

"Uncaught TypeError: Cannot read property 'value' of null" for line 17

입니다 다른 함수에 의한 추가 계산이 필요하지만 value1에 값이 저장되어 있지 않으면 작동하지 않습니다.

html은 HTML 문서의 머리 부분에있는 javascript 다음에 나타납니다.

+1

내가 볼 수 없습니다. 'calculate'가 호출 된 것을 볼 수 있지만, 아래쪽에있는 것은 어디에 있는가? (value1 = calculate ('a', 'b', 'c', 'd')')? 다른 말로하면, 당신이 무엇을 요구하고 있는지 불분명합니다. – akonsu

+0

요소가 어떤 값을 가지기 전에'calculate'를 직접 호출하는 것처럼 보입니다. 결국 NaN으로 끝납니다. – adeneo

+0

@akonsu 스크립트가로드 될 때 호출됩니다. – FlyingPiMonster

답변

1

값이 입력되지 않은 경우 숫자 변수에 기본값을 제공해야합니다. 이 스 니펫에서 잘 작동합니다.

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. 
 
\t \t var volume = document.getElementById(ingVolume).value || 0; 
 
\t \t var carrier = document.getElementById(percentCarrier).value || 0; 
 
\t \t var mCarrier = carrier/100; 
 
\t \t 
 
\t \t var x = document.getElementById(totalCarrierVolume).innerHTML = mCarrier*(volume/(1- 
 
     mCarrier)); 
 
\t \t var y = document.getElementById(totalIngredientVolume).innerHTML = parseInt(volume) + x; 
 
\t \t 
 
\t \t 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;"> 
 
\t <tr> 
 
\t \t <td>Ingredient Name</td> 
 
\t \t <td>Amount (in Mg)</td> 
 
\t \t <td>% Carrier</td> 
 
\t \t <td></td> 
 
\t \t <td>Total Carrier Volume</td> 
 
\t \t <td>Total Ingredient Volume</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td><input type="text"></input></td> 
 
\t \t <td><input type="number" id="a"> Mg</input></td> 
 
\t \t <td><input type="number" id="b"></input> %</td> 
 
\t \t <td><button type="button" onclick="calculate('a', 'b', 'c', 'd')">Calculate Final  
 
     Volume</button></td> 
 
\t \t <td id="c"></td> 
 
\t \t <td id="d"></td> 
 
\t \t <td><a href="#" onclick="toggleRow('row2')">New Ingredient</a></td> 
 

 
\t </tr> 
 
    </table> 
 
    </form>

편집는 : 여기 영업 이익의 업데이트 된 코드 샘플과 일치하는 새로운 조각입니다. 버튼 클릭 작업을 수행하려면 값을 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>
당신이 게시 코드가 HTML에서 호출

+0

감사합니다. 그러나 이것을 가져 가면 입력란에 숫자를 입력하고 '최종 볼륨 계산'을 클릭합니다. 자바 스크립트 콘솔로 이동하면 value1이 아직 정의되지 않았습니다. 반면에 calculate ('a', 'b', 'c', 'd')를 실행하면 값이 반환됩니다. –

+0

@JonathanBechtel 위의 주석에서 물어봤을 때 **는 파일 이름과 행 번호와 같은 오류 메시지를 가리 킵니까? 그 줄은 뭐야? – Phil

+0

@Phil - 읽습니다 : "잡히지 TypeError :"var volume = document.getElementById (ingVolume) .value; "줄 17에 대한 '값'null의 속성을 읽을 수 없습니다" –

관련 문제