Develop Reference

JavaScript array application

I'm trying to create a sample accounting system, the checkbox can be add to the total after it's checked and the input text is the amount of the money.
but my result keep getting zero, I can't figure it out.
Anyone can help me handle this problem?
I've test that the length of total_ary is 0, I think that is the mainly problem
function Totalamount() {
var input_cb = document.getElementsByName('cb');
var amount = [];
var total_ary = [];
var total = 0;
var price = [10, 20, 30];
var i = 0;
for (i = 0; i < input_cb.length; i++) {
if (input_cb[i].checked) {
amount.push(document.getElementsByName("amount").value); //get amounts of the products
} else {
amount.push(0); //If there is no input, add 0 to the array
}
}
for (i = 0; i < total_ary.length; i++) {
total_ary.push(parseInt(amount[i] * price[i])); // Add the products' total price to array
total += parseInt(total_ary[i]); //Counting the total money
}
document.getElementById("result").innerHTML = "$" + 0;
document.getElementById("result").innerHTML = "$" + total ;
}
<fieldset>
<input type="checkbox" name="cb" checked>$10：<input type="text" name="amount"><br>
<input type="checkbox" name="cb" checked>$20：<input type="text" name="amount"><br>
<input type="checkbox" name="cb" checked>$30：<input type="text" name="amount"><br>
</fieldset>
<button onclick="Totalamount()">Count</button>
<p>Total = <span id="result">

You do
document.getElementsByName("amount").value
but getElementsByName returns a collection, not an element.
You do
var total_ary = [];
// ... code that doesn't reference total_ary
for (i = 0; i < total_ary.length; i++) {
total_ary.push(parseInt(amount[i] * price[i])); // Add the products' total price to array
total += parseInt(total_ary[i]); //Counting the total money
}
But since the code in between doesn't reference total_ary, the total ends up being 0.
From a selected checkbox, you need to navigate to the associated input:
document.getElementsByName("amount")[i].value
since i is the cb index you're iterating over, the same i in the amount collection will refer to the input you need.
Or, more elegantly, just navigate to the next element in the DOM when a checkbox is checked, and take the number for each product's price from the DOM too. You can also select only the checked checkboxes immediately with a :checked selector, and attach the event listener using addEventListener (instead of an inline handler; inline handlers should be avoided)
document.querySelector('button').addEventListener('click', () => {
let total = 0;
for (const input of document.querySelectorAll('[name=cb]:checked')) {
const price = input.nextSibling.textContent.match(/\d+/)[0];
const amount = input.nextElementSibling.value;
total += price * amount;
}
document.getElementById("result").innerHTML = total + "元";
});
<fieldset>
<input type="checkbox" name="cb" checked>$10：<input><br>
<input type="checkbox" name="cb" checked>$20：<input><br>
<input type="checkbox" name="cb" checked>$30：<input><br>
</fieldset>
<button>Count</button>
<p>Total = <span id="result">

document.getElementsByName() returns a collection of elements. so calling value property will not work there as it does not have such property.
You can hold input elements with amount_inputs variable and iterate over it (in the example below by using spread syntax and Array.reduce())
And with Array.reduce() you can calculate the sum of the prices. There is no need for var amount = [] and var total_ary = [] variables.
Hope this helps
function Totalamount() {
var input_cb = document.getElementsByName('cb');
var amount_inputs = document.getElementsByName("amount")
var total = 0;
var price = [10, 20, 30];
total = [...input_cb].reduce((total, cb, i) => {
if(cb.checked){
total += (parseInt(amount_inputs[i].value) || 0) * price[i]
// ^^^^^^^^^ This is to avoid NaN multiplication
}
return total
},0);
document.getElementById("result").innerHTML = "$" + 0;
document.getElementById("result").innerHTML = total + "元";
}
<fieldset>
<input type="checkbox" name="cb" checked>$10：<input type="text" name="amount"><br>
<input type="checkbox" name="cb" checked>$20：<input type="text" name="amount"><br>
<input type="checkbox" name="cb" checked>$30：<input type="text" name="amount"><br>
</fieldset>
<button onclick="Totalamount()">Count</button>
<p>Total = <span id="result">

Use Index while retrieving the element from document.getElementsByName("amount");
Use for loop on amount array not on total_ary
function Totalamount() {
var input_cb = document.getElementsByName('cb');
var amount = [];
var total_ary = [];
var total = 0;
var price = [10, 20, 30];
var i = 0;
for (i = 0; i < input_cb.length; i++) {
if (input_cb[i].checked) {
amount.push(document.getElementsByName("amount")[i].value); //get amounts of the products
} else {
amount.push(0); //If there is no input, add 0 to the array
}
}
for (i = 0; i < amount.length; i++) {
total_ary.push(parseInt(amount[i] * price[i])); // Add the products' total price to array
total += isNaN(parseInt(total_ary[i])) ? 0 : parseInt(total_ary[i]); //Counting the total money
}
document.getElementById("result").innerHTML = "$" + 0;
document.getElementById("result").innerHTML = "$" + total ;
}
<fieldset>
<input type="checkbox" name="cb" checked>$10：<input type="text" name="amount"><br>
<input type="checkbox" name="cb" checked>$20：<input type="text" name="amount"><br>
<input type="checkbox" name="cb" checked>$30：<input type="text" name="amount"><br>
</fieldset>
<button onclick="Totalamount()">Count</button>
<p>Total = <span id="result">

You have made a few mistakes:
(1) If you want to keep all the checkboxes checked at initial stage
use checked="true" in place of checked
(2) getElementsByName("amount") returns an array, so you should use the index as well
(3) total_ary length is 0 initially.. therefore, you should run the loop with input_cb. (Here, you can do both the task with a single loop: refer code below)
Refer the code with corrections:
<!DOCTYPE html>
<html>
<head>Order sys
<script>
function Totalamount() {
var input_cb = document.getElementsByName('cb');
var amount = [];
var total = 0;
var price = [10,20,30];
var i=0;
for (i = 0; i < input_cb.length; i++) {
if (input_cb[i].checked){
amount.push(parseInt(document.getElementsByName("amount")[i].value)); //get amounts of the products
}
else{
amount.push(0); //If there is no input, add 0 to the array
}
total += parseInt(amount[i] * price[i]) //Counting the total money
}
document.getElementById("result").innerHTML = "$" + 0;
document.getElementById("result").innerHTML = total + "元";
}
</script>
</head>
<body>
<fieldset>
<input type = "checkbox" name="cb" checked="true">$10：<input type="text" id="amount_milk" name="amount" ><br>
<input type = "checkbox" name="cb" checked="true">$20：<input type="text" id="amount_soymlik" name="amount"><br>
<input type = "checkbox" name="cb" checked="true">$30：<input type="text" id="amount_blacktea" name="amount" ><br>
</fieldset>
<button onclick="Totalamount()">Count</button>
<p>Total = <span id="result">
</body>
</html>

You can refactor your code:
Fist use inputs of type number <input type="number" name="amount"> to accept only numbers from your end users
Then, you can work with indexed arrays like [...document.querySelectorAll('input[name="cb"]')] and loop only one time with Array.prototype.reduce() to get the total
Code example:
function Totalamount() {
const inputNumberArr = [...document.querySelectorAll('input[name="cb"]')]
const inputAmountArr = [...document.querySelectorAll('input[name="amount"]')]
const priceArr = [10, 20, 30]
const total = inputNumberArr.reduce((a, c, i) => {
const num = c.checked ? +inputAmountArr[i].value : 0
return a + num * priceArr[i]
}, 0)
document.getElementById('result').innerHTML = '$' + 0
document.getElementById('result').innerHTML = '$' + total
}
<fieldset>
<input type="checkbox" name="cb" checked> $10：
<input type="number" name="amount"><br>
<input type="checkbox" name="cb" checked> $20：
<input type="number" name="amount"><br>
<input type="checkbox" name="cb" checked> $30：
<input type="number" name="amount"><br>
</fieldset>
<button onclick="Totalamount()">Count</button>
<p>Total = <span id="result">

Is this what you are looking for?
Errors that I identified.
Making use of document.getElementsByName("amount").value instead of making the respective amount field you were making use of the global selector.
Trying to loop total_ary array instead of amount array.
function Totalamount() {
var input_cb = document.getElementsByName('cb');
var amountInput = document.getElementsByName('amount');
var amount = [];
var total_ary = [];
var total = 0;
var price = [10,20,30];
var i=0;
for (i = 0; i < input_cb.length; i++) {
if (input_cb[i].checked && amountInput[i].value){
amount.push(parseInt(amountInput[i].value)); //get amounts of the products
}
else{
amount.push(0); //If there is no input, add 0 to the array
}
}
for (i = 0; i < amount.length; i++) {
total_ary.push(parseInt(amount[i] * price[i])); // Add the products' total price to array
total += parseInt(total_ary[i]); //Counting the total money
}
document.getElementById("result").innerHTML = "$" + 0;
document.getElementById("result").innerHTML = total + "元";
}
<fieldset>
<input type = "checkbox" name="cb" checked>$10
<input type="text" id="amount_milk" name="amount" ><br>
<input type = "checkbox" name="cb" checked>$20
<input type="text" id="amount_soymlik" name="amount"><br>
<input type = "checkbox" name="cb" checked>$30
<input type="text" id="amount_blacktea" name="amount" ><br>
</fieldset>
<button onclick="Totalamount()">Count</button>
<p>Total = <span id="result">

How to make inputs disabled until button is clicked

I want all inputs (radios, checkboxes, etc..) to be disabled (I don't want to be able to check them/ type) until "Start Quiz" button is clicked.
(That's all I need, this code is a quiz and I don't want people to be able to start doing it before clicking that button that releases starting time. But I don't know how to do it, I'm new to all this.)
var tacniOdgovori = 0;
var netacniOdgovori = 0;
function pocniKviz(){
vreme1 = new Date();
var vremeOd = vreme1.getHours() + ":" + vreme1.getMinutes() + ":" + vreme1.getSeconds();
document.getElementById("vremeOd").innerHTML = vremeOd;
document.getElementById("btnZapocniKviz").disabled = true;
document.getElementById("btnZavrsiKviz").disabled = false;
}
function zavrsiKviz(){
var pitanje1 = document.getElementsByName('pitanje1');
for (var i = 0; i < pitanje1.length; i++)
{
if (pitanje1[i].checked)
{
if(pitanje1[i].value == "Da"){
tacniOdgovori = tacniOdgovori + 1;
}
}
}
var pitanje2 = document.getElementsByName('pitanje2');
for (var i = 0; i < pitanje2.length; i++)
{
if (pitanje2[i].checked)
{
if(pitanje2[i].value == "HTTP"){
tacniOdgovori++;
}
}
}
if(document.getElementById("pitanje3").value == "interakcija"){
tacniOdgovori++;
}
var pitanje4 = document.getElementsByName('pitanje4');
for (var i = 0; i < pitanje4.length; i++)
{
if (pitanje4[i].checked)
{
if(pitanje4[i].value == "Apache" && pitanje4[i].value == "IIS"){
tacniOdgovori++;
}
}
if (pitanje4[i].checked)
{
if(pitanje4[i].value == "Apache" || pitanje4[i].value == "IIS"){
tacniOdgovori=tacniOdgovori+0.5;
}
}
document.getElementById("btnResetujKviz").disabled = false;
}
vreme2 = new Date();
var vremeDo = vreme2.getHours() + ":" + vreme2.getMinutes() + ":" + vreme2.getSeconds();
document.getElementById("vremeDo").innerHTML = vremeDo;
document.getElementById("tacniOdgovori").innerHTML = tacniOdgovori;
document.getElementById("netacniOdgovori").innerHTML = 4 - tacniOdgovori;
document.getElementById("rezultat").innerHTML = (tacniOdgovori/4)*100 + "%";
document.getElementById("btnZavrsiKviz").disabled = true;
}
<html>
<head>
</head>
<body style="padding:1%;">
<h2 align="center">Kviz</h3>
<button onclick="pocniKviz()" id="btnZapocniKviz">Start Quiz</button>
<p>Vreme pocetka rada: <span id="vremeOd" style="color:red">span vreme od</span></p>
<hr>
<h3>1. Da li je moguce hostovati web sajt na vise web servera?</h3>
<input type="radio" value="Da" name="pitanje1">Da</input>
<input type="radio" value="Ne" name="pitanje1">Ne</input>
<input type="radio" value="Svaki" name="pitanje1">Svaki web sajt se hostuje na vise web servera</input>
<h3>2. Pomocu kojih protokola je moguce pristupiti sajtovima? (jedan ili vise odgovora)</h3>
<input type="checkbox" value="FTP" name="pitanje2">FTP</input>
<input type="checkbox" value= "HTTP" name="pitanje2">HTTP</input>
<input type="checkbox" value= "SMB" name="pitanje2">SMB</input>
<input type="checkbox" value= "SSH" name="pitanje2">SSH</input>
<input type="checkbox" value= "WSP" name="pitanje2">WSP</input>
<h3>3. Kada korisnik vrsi neku aktivnost na sajtu to se zove <input id="pitanje3"></h3>
<h3>4. Sta je od navedenog web server? (jedan ili više odgovora)</h3>
<input type="checkbox" value="Apache" name="pitanje4">Apache</input>
<input type="checkbox" value="Samba" name="pitanje4">Samba</input>
<input type="checkbox" value="IIS" name="pitanje4">IIS</input>
<hr>
<button onclick="zavrsiKviz()" id="btnZavrsiKviz" disabled>Zavrsi kviz</button>
<button onClick="window.location.reload()" id="btnResetujKviz" disabled>Resetuj kviz</button>
<p>Vreme kraja rada: <font color="red"><span id="vremeDo">span vreme do</span></font></p>
<p>Tacnih odgovora: <font color="green"><span id="tacniOdgovori">span tacnih odgovora</span></font></p>
<p>Netacnih odgovora: <font color="red"><span id="netacniOdgovori">span netacnih odgovora</span></font></p>
<p>Uspeh u procentima: <span id="rezultat">span rezultata</span></p>
</body>
</html>

First, add a disabled property to your input elements, like this
<input type="radio" value="Da" name="pitanje1" disabled="disabled">Da</input>
Then, inside your pocniKviz() function:
var inputs = document.querySelectorAll('input'); //get all inputs and store into an array
for (i = 0; i < inputs.length; i++) {
inputs[i].disabled = false; //enable the element
}
you can also disable your inputs through JS, on the first line of your script:
for (i = 0; i < inputs.length; i++) {
inputs[i].disabled = true; //disable the element
}

First, add a disabled property to your input elements and then
I implemented in some of the inputs
try to understand it and then do same thing with other inputs
Main Part Changed
put this code into your start Quiz button's click event
var input = document.getElementsByTagName("input"); // gets all the input tags as nodelist
var inputList = Array.prototype.slice.call(input); //convert it to array
inputList.forEach(function(element) { // loops through it and then sets disabled = false
element.disabled = false;
});
var tacniOdgovori = 0;
var netacniOdgovori = 0;
function pocniKviz(){
vreme1 = new Date();
var vremeOd = vreme1.getHours() + ":" + vreme1.getMinutes() + ":" + vreme1.getSeconds();
document.getElementById("vremeOd").innerHTML = vremeOd;
document.getElementById("btnZapocniKviz").disabled = true;
document.getElementById("btnZavrsiKviz").disabled = false;
var input = document.getElementsByTagName("input"); // gets all the input tags as nodelist
var inputList = Array.prototype.slice.call(input); //convert it to array
inputList.forEach(function(element) { // loops through it and then sets disabled = false
element.disabled = false;
});
}
function zavrsiKviz(){
var pitanje1 = document.getElementsByName('pitanje1');
for (var i = 0; i < pitanje1.length; i++)
{
if (pitanje1[i].checked)
{
if(pitanje1[i].value == "Da"){
tacniOdgovori = tacniOdgovori + 1;
}
}
}
var pitanje2 = document.getElementsByName('pitanje2');
for (var i = 0; i < pitanje2.length; i++)
{
if (pitanje2[i].checked)
{
if(pitanje2[i].value == "HTTP"){
tacniOdgovori++;
}
}
}
if(document.getElementById("pitanje3").value == "interakcija"){
tacniOdgovori++;
}
var pitanje4 = document.getElementsByName('pitanje4');
for (var i = 0; i < pitanje4.length; i++)
{
if (pitanje4[i].checked)
{
if(pitanje4[i].value == "Apache" && pitanje4[i].value == "IIS"){
tacniOdgovori++;
}
}
if (pitanje4[i].checked)
{
if(pitanje4[i].value == "Apache" || pitanje4[i].value == "IIS"){
tacniOdgovori=tacniOdgovori+0.5;
}
}
document.getElementById("btnResetujKviz").disabled = false;
}
vreme2 = new Date();
var vremeDo = vreme2.getHours() + ":" + vreme2.getMinutes() + ":" + vreme2.getSeconds();
document.getElementById("vremeDo").innerHTML = vremeDo;
document.getElementById("tacniOdgovori").innerHTML = tacniOdgovori;
document.getElementById("netacniOdgovori").innerHTML = 4 - tacniOdgovori;
document.getElementById("rezultat").innerHTML = (tacniOdgovori/4)*100 + "%";
document.getElementById("btnZavrsiKviz").disabled = true;
}
<html>
<head>
</head>
<body style="padding:1%;">
<h2 align="center">Kviz</h3>
<button onclick="pocniKviz()" id="btnZapocniKviz">Start Quizz</button>
<p>Vreme pocetka rada: <span id="vremeOd" style="color:red">span vreme od</span></p>
<hr>
<h3>1. Da li je moguce hostovati web sajt na vise web servera?</h3>
<input type="radio" value="Da" name="pitanje1" disabled>Da</input>
<input type="radio" value="Ne" name="pitanje1" disabled>Ne</input>
<input type="radio" value="Svaki" name="pitanje1" disabled>Svaki web sajt se hostuje na vise web servera</input>
<h3>2. Pomocu kojih protokola je moguce pristupiti sajtovima? (jedan ili vise odgovora)</h3>
<input type="checkbox" value="FTP" name="pitanje2" disabled>FTP</input>
<input type="checkbox" value= "HTTP" name="pitanje2" disabled>HTTP</input>
<input type="checkbox" value= "SMB" name="pitanje2" disabled>SMB</input>
<input type="checkbox" value= "SSH" name="pitanje2" disabled>SSH</input>
<input type="checkbox" value= "WSP" name="pitanje2" disabled>WSP</input>
<h3>3. Kada korisnik vrsi neku aktivnost na sajtu to se zove <input id="pitanje3"></h3>
<h3>4. Sta je od navedenog web server? (jedan ili više odgovora)</h3>
<input type="checkbox" value="Apache" name="pitanje4">Apache</input>
<input type="checkbox" value="Samba" name="pitanje4">Samba</input>
<input type="checkbox" value="IIS" name="pitanje4">IIS</input>
<hr>
<button onclick="zavrsiKviz()" id="btnZavrsiKviz" disabled>Zavrsi kviz</button>
<button onClick="window.location.reload()" id="btnResetujKviz" disabled>Resetuj kviz</button>
<p>Vreme kraja rada: <font color="red"><span id="vremeDo">span vreme do</span></font></p>
<p>Tacnih odgovora: <font color="green"><span id="tacniOdgovori">span tacnih odgovora</span></font></p>
<p>Netacnih odgovora: <font color="red"><span id="netacniOdgovori">span netacnih odgovora</span></font></p>
<p>Uspeh u procentima: <span id="rezultat">span rezultata</span></p>
</body>
</html>

Re-Capture Dropdown value without refreshing the page

I'm developing a decision tree drop-down wherein the selection may change based on the user's decision.
I was able to display the correct results using a loop with the help of selectedIndex if no changes of selection is made but when I change it to other selection that's the time I get an issue
I already tried clearing the stored array by doing this result = [] also this result = 0 but after that it wont recapture the selected dropdown even though I created a separate button for displaying result and clearing result.
Sample Scenario:
I choose A on question 1 then A-1 on question 2 when I click on Display result it will display the correct selection. The issue happens when I change my selection into B on question 1 and B-1 on question 2 because the result still includes the previous selection which is A-1 value even though I created a clear button which clear out the value of the array. The correct answer on that should be B-Value and B-1-Value only.
//THIS IS THE CODE TO CLEAR THE RESULT
function clearResult() {
var result = []
for (var x = 0; x < inputs.length; x++) {
if (inputs[x].selectedIndex > 0) {
inputs[x] = 0;
document.getElementById("demo").innerHTML = '';
}
}
return console.log(inputs);
}
//THIS IS THE CODE TO DISPLAY THE RESULT
var inputs = form1.elements;
function displayResult() {
var result = [];
for (var x = 0; x < inputs.length; x++) {
if (inputs[x].selectedIndex) {
result += inputs[x].value + "</br>";
document.getElementById("demo").innerHTML = result;
}
}
return false;
}
//PLEASE IGNORE THE CODE BELOW
//FOR HIDING DROPDOWN
var base = {
productFilterSetup: function() {
$('.productFilter').each(
function() {
var tmp = new base.filterGroup(this);
tmp.setup();
});
},
filterGroup: function(filter_group) {
var me = this;
me.target_element = filter_group;
me.active_element_index = 0;
me.setup = function() {
$(filter_group).find('option[type=dropdown]').bind('click', function() {
me.update(this);
});
};
me.update = function(target_dropdown) {
var div = $(me.target_element).find('div'),
len = div.length,
i = 0,
j = 0,
dropdowns,
dropdowns_len,
options = [],
options_buffer = '',
num_of_steps = 0;
for (i = 1; i <= num_of_steps + 1; i += 1) {
if ($('div.step' + i).length > 0) {
num_of_steps += 1;
}
}
for (i = 0; i < num_of_steps; i += 1) {
if ($(target_dropdown).parents('div.step' + (i + 1)).length > 0) {
for (j = i; j < num_of_steps; j += 1) {
$('div.step' + (j + 2) + ' option[type=dropdown]').attr('checked', false);
}
}
}
for (i = 0; i < len; i += 1) {
dropdowns = $(div[i]).find('option[type=dropdown]');
dropdowns_len = dropdowns.length;
for (j = 0; j < dropdowns_len; j += 1) {
if ($(dropdowns[j]).is(':checked')) {
options.push(j + 1);
}
}
}
div.addClass('hide');
$('div.option0').removeClass('hide');
for (i = 0; i < options.length; i += 1) {
options_buffer += options[i];
$('div.option' + options_buffer).removeClass('hide');
}
};
}
};
$(
function() {
base.productFilterSetup();
});
//]]>
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" class="productFilter" name="form1" target='sendinfo' id='infoform' onsubmit='return displayResult()'>
<!-- Group 1 -->
<div class="step1 option0">
<label for="group_1">Qustion-1</label>
<select>
<option disabled selected class="drpdow">Select Option</option>
<option id="1" name="group_1" class="drpdow" type="dropdown" value="-A-Value" />
<label for="1">A</label>
<option id="2" name="group_1" class="drpdow" type="dropdown" value="-B-Value" />
<label for="2">B</label>
</select>
</div>
<!-- Group 2 -->
<div class="hide step2 option1">
<label for="group_2">Qustion-2</label>
<select>
<option disabled selected class="drpdow">Select Option</option>
<option id="1_1" name="group_2" class="drpdow" type="dropdown" value="-A-1-Value" />
<label for="1_1">A-1</label>
<option id="1_2" name="group_2" class="drpdow" type="dropdown" value="-A-2-Value" />
<label for="1_2">A-2</label>
</select>
</div>
<div class="hide step2 option2">
<label for="group_2">Question-2</label>
<select>
<option disabled selected class="drpdow">Select Option</option>
<option id="2_1" name="group_2" class="drpdow" type="dropdown" value="-B-1-Value" />
<label for="2_1">B-1</label>
<option id="2_2" name="group_2" class="drpdow" type="dropdown" value="-B-2-Value" />
<label for="2_2">B-2</label>
</select>
</div>
<!-- End of form -->
<p class="pResult" id="demo">
Result will display here
</p>
<p id="demo1"></p>
<input class="copyData" id="btn" type='submit' value='Display result' />
<button class="copyData" id="btnShow" type="button" onclick="clearResult()">Clear result</button>
</form>

Why is my JavaScript function not returning the checked array value?

In the following code, my alert() is returning 0 when it should be returning the checked box value. I need it to return the value in the designated array associated with the checkbox.
<!DOCTYPE html>
<html>
<head> <title> Program 4 Parallel Arrays </title>
<style type="text/css"></style>
<script type="text/javascript">
var priceArray = [45.25, 24.88, 32.35, 27.33,
34.85, 36.24, 85.33, 45.32];
var pageArray = [1098, 536, 500, 792, 912, 1224, 899, 504];
function funRun () {
var totalPages = 0;
for(i=0; i<document.bookForm.books[i].length; i++) {
if(document.bookForm.books[i].checked == true) {
totalPages = totalPages + pageArray[i];
}
}
alert("totalPages : " + totalPages);
}
function funRun1 () {
var subTotal = 0;
for(i=0; i<document.bookForm.books[i].length; i++) {
if(document.bookForm.books[i].checked == true) {
subTotal = subTotal + priceArray[i];
}
}
alert("subTotal : " + subTotal);
}
tax = (.06 * subTotal)
total= (subTotal + tax)
</script>
</head>
<body>
<form name="bookForm">
<input type="checkbox" name="books" value="Flanagan" />
JavaScript, the Definitive Guide: $45.25 <br>
<input type="checkbox" name="books" value="McFarland" />
JavaScript & JQuery: The Missing Manual: $24.88 <br>
<input type="checkbox" name="books" value="Morrison" />
Head First JavaScript: $32.35 <br>
<input type="checkbox" name="books" value="Wilton&McPeak" />
Beginning JavaScript: $27.33 <br>
<input type="checkbox" name="books" value="Quigley" />
JavaScript by Example: $34.85 <br>
<input type="checkbox" name="books" value="Goodman" />
JavaScript Bible: $36.24 <br>
<input type="checkbox" name="books" value="Gosselin" />
JavaScript: The Web Technologies Series: $85.33 <br>
<input type="checkbox" name="books" value="Suehring" />
JavaScript Step by Step: $45.32 <br>
<br>
<input type="button"
value="Calculate Total"
onclick="funRun();funRun1()"/>
<input type="reset"/>
<br>
<br>
<input type="text" name="totalPages"/>Total Pages<br>
<input type="text" name="subTotal"/>Subtotal<br>
<input type="text" name="tax"/>Tax<br>
<input type="text" name="total"/>Total</p>
</body>
</html>

The issue is at your for loop.
Use:
for(i=0; i<document.bookForm.books.length; i++) {
Instead of:
for(i=0; i<document.bookForm.books[i].length; i++) {
The reason is that you should not access the array element at the size definition.
Also, the following block is returning a ReferenceError since the subTotal variable was not defined out of the funRun1() function:
tax = (.06 * subTotal)
total= (subTotal + tax)

I would change your funRun() to this
function funRun () {
var inputs = document.forms[0].querySelectorAll('[name=books]');
var totalPages = 0;
for(i=0; i<inputs.length; i++) {
if(inputs[i].checked) {
totalPages = totalPages + pageArray[i];
}
}
alert("totalPages : " + totalPages);
}
Apply the same to funRun1() and you'll be fine.
Also, an error is raised in the console because of this
tax = (.06 * subTotal)
total= (subTotal + tax)
The reason is that your subTotal scope is only in funRun1()
I would even suggest putting your script just before the </body>

apart from the changes suggested by Zanon, take these two lines inside the function funrun1() -
tax = (.06 * subTotal)
total= (subTotal + tax)
Also, I would suggest you to call funrun1() from inside funrun() onclick event of the button.

The issue is that when you are indexing with i inside your for loop it is 0 at that time which means that your loop won't iterate at all. Therefore,
Change:
for(i=0; i<document.bookForm.books[i].length; i++) {
if(document.bookForm.books[i].checked == true) {
totalPages = totalPages + pageArray[i];
}
}
To:
for(i=0; i<document.bookForm.books.length; i++) {
if(document.bookForm.books[i].checked == true) {
totalPages = totalPages + pageArray[i];
}
}
and Change
for(i=0; i<document.bookForm.books[i].length; i++) {
if(document.bookForm.books[i].checked == true) {
subTotal = subTotal + priceArray[i];
}
}
To:
for(i=0; i<document.bookForm.books.length; i++) {
if(document.bookForm.books[i].checked == true) {
subTotal = subTotal + priceArray[i];
}
}
In addition, here is a working JS Fiddle for you.
https://jsfiddle.net/Kitchenfinks/5ovkdh2c/
Happy Coding!

Unchecking a checkbox and modifying value of sum

I am trying to design a menu. If you check a box, then sum get added up and if you uncheck it, the sum is reduced. I face trouble in reducing the sum while unchecking the box and also the value of sum is not globally changed. Please help me out.
<head>
<script>
var sum=0;
function a(sum,num) {
sum=sum+num;
document.getElementById("demo").innerHTML=sum;
}
</script>
</head>
<body>
<input type="checkbox" name="Dal" id="dal" onclick=a(sum,10)>Dal<br>
<input type="checkbox" name="Rice" id="rice" onclick=a(sum,20)>Rice<br>
<h1> Total Price is : </h1>
<p id="demo"> 0 </p>
</body>

Change the markup, add a value and a class, and remove the inline JS
<input type="checkbox" name="Dal" id="dal" value="10" class="myClass">Dal
<input type="checkbox" name="Rice" id="rice" value="20" class="myClass">Rice
<h1> Total Price is : </h1><p id="demo">0</p>
Then do
<script type="text/javascript">
var inputs = document.getElementsByClassName('myClass'),
total = document.getElementById('demo');
for (var i=0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.checked ? 1 : -1);
total.innerHTML = parseFloat(total.innerHTML) + add
}
}
</script>
FIDDLE

You can do something like this:
function a (elem, num) {
var k = (elem.checked) ? 1 : -1;
sum = sum + k * num;
document.getElementById("demo").innerHTML = sum;
}
And in the HTML:
<input type="checkbox" name="Dal" id="dal" onclick="a(this, 10);">Dal<br>
<input type="checkbox" name="Rice" id="rice" onclick="a(this, 20);">Rice<br>

Try something like this:
var sum = 0;
function a(id, num) {
if(id.checked == true){
sum += num;
id.onclick = function() { a(id, num)};
}
else {
sum -= num;
id.onclick = function() { a(id, num)};
}
document.getElementById("demo").innerHTML=sum;
}
Fiddle: http://jsfiddle.net/95pvc/2/

My own take would involve removing the event-handling from the HTML (unobtrusive JavaScript) for easier maintenance in future, using data-* attributes to contain the price and using a class-name to identify the relevant ingredients, to give the following HTML:
<input class="ingredients" type="checkbox" name="Dal" data-price="10" id="dal" />Dal
<input class="ingredients" type="checkbox" name="Rice" data-price="20" id="rice" />Rice
<h1> Total Price is : </h1>
<p id="demo">0</p>
Which leads to the following JavaScript:
var ingredients = document.getElementsByClassName('ingredients');
function price() {
var result = document.getElementById('demo'),
curPrice = 0,
ingredients = document.getElementsByClassName('ingredients');
for (var i = 0, len = ingredients.length; i < len; i++) {
if (ingredients[i].checked) {
curPrice += parseFloat(ingredients[i].getAttribute('data-price'));
}
}
result.firstChild.nodeValue = curPrice;
}
for (var i = 0, len = ingredients.length; i < len; i++) {
ingredients[i].addEventListener('change', price);
}
JS Fiddle demo.
To avoid having to iterate through the relevant checkboxes, it might be better to wrap those input elements in a form, and then bind the event-handling to that form:
var ingredients = document.getElementsByClassName('ingredients');
function price() {
var result = document.getElementById('demo'),
curPrice = 0,
ingredients = document.getElementsByClassName('ingredients');
for (var i = 0, len = ingredients.length; i < len; i++) {
if (ingredients[i].checked) {
curPrice += parseFloat(ingredients[i].getAttribute('data-price'));
}
}
result.firstChild.nodeValue = curPrice;
}
document.getElementById('formID').addEventListener('change', price);
JS Fiddle demo.
References:
addEventListener().
element.getAttribute().
getElementsByClassName().
parseFloat().