체크 박스에 따라 기능 실행하기

Question

일부 체크 박스에 반응하는 계산기를 코딩하려고합니다. 어떤 상자에 체크 표시가되어 있는지에 따라 서빙 크기에 아래의 표에서 다른 값이 곱해질 것입니다. 예를 들어, ThickChiaYogurt 테이블에서 'Thick'이 일관성있게 선택되면 'Chia'tickbox가 선택되고 'Yogurt'tickbox가 선택됩니다.

내가 가지고있는 문제는 값으로 무엇이든 할 수 없다는 것입니다.

<p> 
<label style="font-family: arial" for="textfield">Serving Size (ml):</label> 
<input type="text" name="textfield" id="ServingSize"> <?p> 
<table width="250"> 
<tr> 
<td><label style="font-family: arial"> 
    <input type="checkbox" name="Settings" value="ChiaUsed" id="Chia"> 
    Use Chia Seeds?</label></td> 
</tr> 
<tr> 
    <td><label style="font-family: arial"> 
    <input type="checkbox" name="Settings_" value="YogurtUsed" id="Yogurt"> 
    Use Yogurt?</label></td> 
    </tr> 
<tr> 
    <td><label style="font-family: arial"> 
     <input type="checkbox" name="Settings_" value="ProteinUsed" id="Protein"> 
    Use Protein/Choc powder?</label></td> 
</tr> 
<p style="font-family: arial"> Consistency: <select><option>Thick</option> 
<option>Medium</option> 
    <option>Runny</option></select> </p> 

그리고 나는 그것에 대하여 사용하는거야 정보 :

var ThickChiaYogurt = [0.1, 0.38, 0.036, 0.43] 
    var MediumChiaYogurt = [0.1, 0.42, 0.036, 0.39] 
    var RunnyChiaYogurt= [0.08, 0.46, 0.036, 0.35] 

    // var NO CHIA = [ OATS, MILK, GREEK ] 
    var ThickYogurt = [0.15, 0.38, 0.45] 
    var MediumYogurt = [0.1, 0.42, 0.41] 
    var RunnyYogurt = [0.08, 0.46, 0.37] 

    // var NO GREEK = [ OATS, MILK, CHIA ] 
    var ThickChia = [0.23, 0.58, 0.036] 
    var MediumChia = [0.18, 0.61, 0.36 ] 
    var RunnyChia = [0.16, 0.64, 0.03 ] 

    // var NO GREEK OR CHIA = [ OATS, MILK ] 
    var Thick = [0.25, 0.6] 
    var Medium = [0.22, 0.63] 
    var Runny = [0.2, 0.65] 

var Serving = 111 
// OATS MILK GREEK CHIA POWDERS 
var Output = [0, 0, 0, 0, 0] 

function myFunction(Thick, Serving) { 
return Thick[0] * Serving;    } 

내가 바보 건가요

여기에 선택 상자 코드가 어떻게 생겼는지입니까? 자바 스크립트를 처음 사용하는 날이기 때문에 벽에 머리를 대고있는 것처럼 느껴집니다.

필자는 그들이 얼마나 많은 서빙을했는지를 기록한 후에 사용해야하는 각 재료의 양을 알려주고 해당 상자에 체크 표시를하고 싶습니다.

감사합니다.

Answer 1

이와 같은 각 입력 상자에 onclick 이벤트 처리기를 추가해야합니다. 당신의 myFunction이 함수에서 다음

<input type="checkbox" name="Settings" onclick="myFunction(this)" value="ChiaUsed" id="Chia"> 

,

function myFunction(element){ 
    //use element object here 
} 

당신은 요소 데이터를 받게됩니다. 점 표기법이나 괄호 표기법으로 "값"과 같은 속성에 액세스 할 수 있습니다.

var value = element.value;