根据复选框\\单选按钮调整总成本\\标价

Question

Overview:

This is my first time using javascript. I'm trying to use a combination of Radio Buttons and Check Boxes to adjust the "Total Cost" & "Listed Price" of an Item under a number of different conditions. The JS Fiddle reflects where I currently stand. Any suggestions, examples, comments, or form of help would be greatly appreciated as I'm completely stuck.

JS Fiddle (the code is below as well incase you don't want to open JS Fiddle):

http://jsfiddle.net/y2u24x3r/4/

The Issues\\conditions that I'm completely stuck on:

[Radio 1] How many attendees? (1) (2)

• (2) Should double the Total Cost (unless all Four Event Boxes are checked. See Below).

[Radio 2] Are you a Member? (No) (Yes)

• (No) should make the cost $26.00 per Event as seen in the Jfiddle\\code below.
• (Yes) change the displayed Price per Event to $18.00 and automatically adjust the Total Cost.

[Four Event Check Boxes]

• If all Four Event Boxes are checked, Attendees = '1', and Are you a Member = 'Yes' then override all conditions above and set price to $68.00.

• If all Four Event Boxes are checked, Attendees = '2', and Are you a Member = 'Yes' then override all conditions above and set price to $136.00.

HTML:

 <font color="orange">How many attendees?</font> <input type="radio" name="attendees" id="attendees" value="1" checked="checked" />1 <input type="radio" name="attendees" id="attendees" value="2"/>2<br/>
 <font color="orange">Are you a Member?</font> <input type="radio" name="member" id="member" value="0" checked="checked" />No <input type="radio" name="member" id="member" value="1"/>Yes <br/><br/>
 <form name="listForm"><font color="orange">Select the Concerts you want Tickets for:</font><br/>
 <input type="checkbox" name="event" value="1" onchange="checkTotal()"/><font color="#33FF33"> <div class="price"></div></font></input> Nov. 1, 2015 -- Concert 1<br/>
 <input type="checkbox" name="event" value="1" onchange="checkTotal()"/><font color="#33FF33"> <div class="price"></div></font></input> Dec. 1, 2015 -- Concert 2<br/>
 <input type="checkbox" name="event" value="1" onchange="checkTotal()"/><font color="#33FF33"> <div class="price"></div></font></input> Jan. 1, 2015 -- Concert 3<br/>
 <input type="checkbox" name="event" value="1" onchange="checkTotal()"/><font color="#33FF33"> <div class="price"></div></font></input> Feb. 1, 2015 -- Concert 4<br/><br/>
 <font color="#33FF33">Total Cost:</font> <input value="$0.00" readonly="readonly" type="text" id="total"/>
 </form>

Javascript:

 function checkTotal() {
   var attendees = document.getElementsByName("attendees");
   var member = document.getElementsByName("member");
   var total = 0;
   var event = 0;

    if (member == 0) {
         price = 26.00;
     }           
     else if (member == 1) {
         price = 18.00; 
     }

   for (var i = 0; i < event.length; i++) {
     if (event[i].checked) {
       total += parseFloat(member.value);
         total = total * attendees;

     }
   }

        if (member == 1 && event == 4 && attendees == 1) {
         total = 68.00;
        }

        if (member == 1 && event == 4 && attendees == 2) {
         total = 136.00;
        }

     document.getElementById("total").value = "$" + total.toFixed(2);
 }

Answer 1

Thank you for sharing your attempts, now i can help you correct your code. Lets go over the issues with the code one by one:

1. Invalid left side assignment

unlike in languages like Visual Basic, here in JavaScript you must have a double == operator in order to check conditions. therefore, in the next line:

if (member = 1 && event = 4 && attendees = 1)

what JavaScript actually understands is:

put 1 into member , put 1 into event , and put 1 into attendees .

in order to ask JS to check if their values equal 1, you need to use a double equation operator:

if (member == 1 && event == 4 && attendees == 1)

2. Using of system-reserved keywords

the reason why the previous was actually an issue, is because of the word event after all, JS could simply assign 1 to all of the keywords, but instead it dropped an error into the console saying that the assignment was invalid, so why is that? - that's because in JavaScript there is a reserved keyword named event which represents the event parameter in the function. so when you assign

onchange="checkTotal()"

once that function is called to handle the change event, the event data will be passed into the function in a built in event var. therefore, you should change the names of the input elements to something else, maybe "eventCheckBox" or something.

3. Duplicate IDs

Ids are supposed to be unique. when you search something by ID in JS, it will search from the top of the page and return the first one it finds, because it assumes that this ID is unique. also, in JavaScript you can address the elements by their IDs without getting the elements first using getElementsByID() , so when you are using var names named the same as multiple ids on the page, well, you see the problem? make unique ids per element. if you want a common identifier for your elements, use a common class.

4. Getting value of a radio button

most likely, you have tried to name your radio buttons the same and thought that when you ask for the value, you will get the value of the checked one. well, its good thinking but unfortunately it does not work this way in JavaScript. what you need to do, is find the checked one and get its value. it is rather simple, with 1 line of code:

document.querySelector('input[name="member"]:checked').value;

*same applies for attendees.

5. Counting Checked Checkboxes

while iterating through the checkboxes and altering the total value could work, it is much simpler to count how many of them are checked using the next line:

document.querySelectorAll('input[name="eventCheckBox"]:checked').length;

6. Optional

if you want the total price to update when attendees and membership are changed, then you need to add the change event to them as well.

Here is your fixed code:

 function checkTotal() { //get values from the inputs var attendees = document.querySelector('input[name="attendees"]:checked').value; var member = document.querySelector('input[name="member"]:checked').value; var SelectedEvents = document.querySelectorAll('.EventCheckBox:checked').length; //init vars; var total = 0; var price = 26.00; if (member == 1) { price = 18.00; } //calculate cost total = SelectedEvents * attendees * price; if (member == 1 && SelectedEvents == 4 && attendees == 1) { total = 68.00; } if (member == 1 && SelectedEvents == 4 && attendees == 2) { total = 136.00; } document.getElementById("total").value = "$" + total.toFixed(2); } 

 <font color="orange">How many attendees?</font> <input type="radio" name="attendees" value="1" checked="checked" onchange="checkTotal()" />1 <input type="radio" name="attendees" value="2" onchange="checkTotal()" />2 <br/> <font color="orange">Are you a Member?</font> <input type="radio" name="member" value="0" checked="checked" onchange="checkTotal()" />No <input type="radio" name="member" value="1" onchange="checkTotal()" />Yes <br/> <br/> <form name="listForm"><font color="orange">Select the Concerts you want Tickets for:</font> <br/> <input type="checkbox" name="eventCB1" value="1" onchange="checkTotal()" class="EventCheckBox" /><font color="#33FF33"> <div class="price"></div></font> </input>Nov. 1, 2015 -- Concert 1 <br/> <input type="checkbox" name="eventCB2" value="1" onchange="checkTotal()" class="EventCheckBox" /><font color="#33FF33"> <div class="price"></div></font> </input>Dec. 1, 2015 -- Concert 2 <br/> <input type="checkbox" name="eventCB3" value="1" onchange="checkTotal()" class="EventCheckBox" /><font color="#33FF33"> <div class="price"></div></font> </input>Jan. 1, 2015 -- Concert 3 <br/> <input type="checkbox" name="eventCB4" value="1" onchange="checkTotal()" class="EventCheckBox" /><font color="#33FF33"> <div class="price"></div></font> </input>Feb. 1, 2015 -- Concert 4 <br/> <br/> <font color="#33FF33">Total Cost:</font> <input value="$0.00" readonly="readonly" type="text" id="total" /> </form> 

and a Fiddle

UPDATE:

If having the same name on all of the check boxes causes issues of any sort, it is handled easily.

javascript/html/css have many different ways to achieve the same result, in time you will learn more tricks, for now here are two:

a. the ^= attribute selector:

this selects all elements who's attribute begins with a certain string.
before, we have selected all the inputs using their exact name:

document.querySelectorAll('input[name="eventCB"]:checked')

this selected all checked inputs who's name attribute equals "eventCB" . now our elements have now ID's appended to the name, but all still begin with the same string "eventCB" therefore we can alter our selector as follows:

document.querySelectorAll('input[name^="eventCB"]:checked')

b. common class

in my opinion, it is much easier to set a common class to the events, and select them using the class; let their class be "EventCheckBox" for the example:

document.querySelectorAll('.EventCheckBox:checked').length;

the dot at the beginning of the selector string means class select. without a dot it will select element by type, with a dot it selects class, and with a # it will select by ID.

i have updated the snippet and fiddle above.