Question

I am trying to make small application which uses some html checkbox form objects. Whenever any of those checkboxes are checked on or off, it runs a function which then changes the value of a variable unique to each checkbox. How would I go about making it so that using the arguments of the function – or some other means – I’m able to target the corresponding variable for whenever one of the checkboxes is clicked? Currently here’s what I’m attempting to accomplish.

HTML:

 <form action="" method="get" name="orderForm">
<input name="Test" type="checkbox" value="test" onchange="checkClick('1','5.00')" />Test 1<br />
<input name="Test" type="checkbox" value="test2" onchange="checkBoxClick('2','3.00')" />Test 2 <br />
<input name="Test" type="checkbox" value="test3" onchange="checkBoxClick('3','4.00')" />Test 3 <br />

And the Javascript:

//set global vars
var check1 = 0.00;
var check2 = 0.00;
var check3 = 0.00;

function checkClick(num,cost) {
    if (check+num == 0.00) {
        check+num = cost;
    }
    else {
        check+num = 0.00;
    }
    checkBoxClick();
}

function checkBoxClick() {
    document.getElementById("otherContainer").innerHTML = "<p>" + check1 + "<br />" + check2 + "<br />" + check3 + "<br />" + check4 + "</p>";
}

At the moment it’s just a crude test, but what I’m trying to do is make it so I only need one function that will handle each of the different checkboxes and their variables without having to make a different function for each one.

Answer 1

I see what you’re trying to do. Make a variable check an array instead:

var check = [ 0.00, 0.00, 0.00 ];

Also, pass your parameters as numbers instead:

checkClick(1, 5.00)

But since arrays are 0-indexed, start with 0 instead of 1:

checkClick(0, 5.00)

And where ever you did check+num replace it with check[num].

Here is the result:

var check = [ 0.00, 0.00, 0.00 ];

function checkClick(num, cost) {
    if (check[num] == 0.00) {
        check[num] = cost;
    } else {
        check[num] = 0.00;
    }
    checkBoxClick();
}

function checkBoxClick() {
    document.getElementById("otherContainer").innerHTML = "<p>" + check[1] + "<br />" + check[2] + "<br />" + check[3] + "<br />" + check[4] + "</p>";
}

BTW, you’re using check4 when you never made a check4 variable…