The purpose of the code is to compute for the car market value. If If Age of the Car is :
1 - then subtract 20% from the Price of the Car
2 - then subtract 35% from the Price of the Car
3 - 7 - then subtract 35% from the Price of the Car and then subtract 10%
more for each year starting from the 3rd year.
8 - 10 - then the market value is fixed at 100,000.00
More than 10 years then the market value is fixed at 75,000.00.
Then it will display the name inputted and the value of the car but it doesnt seem to work. pls help
var price = document.getElementById("price").value;
var age = document.getElementById("age").value;
var condition = document.getElementById("condition").value;
var name = document.getElementById("name").value;
age = parseInt(age);
condition = parseInt(condition);
function calculateValue() {
switch (age) {
case 0:
price = price - 0.20 * price;
break;
case 1:
price = price - 0.35 * price;
break;
case 2:
price = price - 0.35 * price - (age - 3) * .10 * price;
break;
case 3:
price = 100000;
break;
case 4:
price = 75000;
break;
}
switch (condition) {
case 0:
price = price;
break;
case 1:
price = price - price * .10;
break;
}
document.getElementById("message").innerHTML = "Your" + name + " is valued at " + price + "today";
}
<h1>Car Market Value Calculator</h1>
<form>
Car Brand:<input id="name" type="text" name="name" placeholder="Please input car brand" autofocus required><br> Age of Car
<select id="age">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3-7</option>
<option value="3">8-10</option>
<option value="4">more than 10</option>
</select><br> Price of Car<input id="price" type="number" name="price" placeholder="minimum:300,000" min="300000"><br>
<p>Good Condition?</p>
Yes <input id="condition" type="radio" name="condition" value="0"> No <input id="condition" type="radio" name="condition" value="1">
<button type="button" name="submit" onclick="calculateValue()">Submit</button>
</form>
<p id="message"></p>
You have a few errors in your code:
You're not getting the input from the dom at the right moment. You should get the input values before calculation, not when the script loads. This ensures that the DOM is loaded, and get the right values.
The age value is not calculated properly. Don't use select for numeric values. Also, read again your case price = 2 ;)
This code does what you expect:
const calculateValue = () => {
let age = +document.querySelector('input[name=age]').value,
price = +document.querySelector('input[name=price]').value,
condition = document.querySelector('input[name=condition]').checked;
// depreciate based on age
if (age==1) price*=.8
else if (age==2) price*=.65
else if (age>2 && age<8) price*=(.65-(age-3)*.1)
else if (age>7 && age<11) price = 100000
else price = 75000;
// depreciate based on condition
if (!condition) price*=.9;
console.log(price);
}
<div>
<input name="age" type="number" placeholder="age">
</div>
<div>
<input name="price" type="number" placeholder="price">
</div>
<div>
Good condition?
<input name="condition" type="radio" value="true" checked>yes
<input name="condition" type="radio" value="false">no
</div>
<button onclick="calculateValue()">Compute</button>
If you open your browser's development console you'll see an error indicating that you're trying to get the .value of something that is null or undefined. Because document.getElementById("price") doesn't find anything when you're executing it.
You're trying to get the values of your inputs before the user has typed anything. Before the inputs have even been rendered on the page even.
You don't want to get the values until the user has pressed the button. So move that code into the function:
function calculateValue() {
var price = document.getElementById("price").value;
var age = document.getElementById("age").value;
var condition = document.getElementById("condition").value;
var name = document.getElementById("name").value;
age = parseInt(age);
condition = parseInt(condition);
//... the rest of your function
}
You need to move the first 6 lines where you are trying to get the values from input inside your calculateValue() function
function calculateValue() {
var price = document.getElementById("price").value;
var age = document.getElementById("age").value;
var condition = document.getElementById("condition").value;
var name = document.getElementById("name").value;
age = parseInt(age);
condition = parseInt(condition);
switch (age) {
...
Simply do this and your code will work fine.
Explanation: You need to get the new values from the input boxes each time the submit button is pressed. What you have done is that you have taken the values from the input boxes only once. As you move these lines inside the function, the fresh values are taken each time the button is pressed.
The document.getElementById commands will execute before the HTML markup is loaded, and hence will trigger an error. You can fix it by moving the variable declarations and value-fetching into the function:
function calculateValue() {
var price = document.getElementById("price").value;
var age = document.getElementById("age").value;
var condition = document.getElementById("condition").value;
var name = document.getElementById("name").value;
age = parseInt(age);
condition = parseInt(condition);
switch (age) {
case 0:
...etc...
You will want to do this anyway, since your code needs to fetch the current input values every time you click "submit".
Get values of your variables inside the calculate value function
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Car Market Value Calculator">
<meta name="keywords" content="calculator, car, market, value">
<meta name="author" content=", 26/02/19">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<h1>Car Market Value Calculator</h1>
<form>
Car Brand:<input id="name" type="text" name="name" placeholder="Please input car brand" autofocus required><br>
Age of Car<select id="age">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3-7</option>
<option value="3">8-10</option>
<option value="4">more than 10</option>
</select><br>
Price of Car<input id="price" type="number" name="price" placeholder="minimum:300,000" min="300000" ><br>
<p>Good Condition?</p>
Yes <input id="condition" type="radio" name="condition" value="0">
No <input id="condition" type="radio" name="condition" value="1">
<button type="button" name="submit" onclick = "calculateValue()">Submit</button>
</form>
<p id="message"></p>
</body>
<script>
function calculateValue(){
var price = document.getElementById("price").value;
var age = document.getElementById("age").value;
var condition = document.getElementById("condition").value;
var name = document.getElementById("name").value;
age = parseInt(age);
condition = parseInt(condition);
alert(price);
switch (age) {
case 0:
price = price - 0.20*price;
break;
case 1:
price = price - 0.35*price;
break;
case 2:
price = price - 0.35*price - (age-3)*.10*price;
break;
case 3:
price = 100000;
break;
case 4:
price = 75000;
break;
}
switch(condition){
case 0:
price = price;
break;
case 1:
price = price- price*.10;
break;
}
document.getElementById("message").innerHTML = "Your"+ name +" is valued at "+price+"today";
}
</script>
</html>
Every time you click the submit you need to get the input values again, and not only when loading the page. Just move the 'var' declarations into the function:
function calculateValue() {
var age = document.getElementById("age").value;
var condition = document.getElementById("condition").value;
var price = document.getElementById("price").value;
var name = document.getElementById("name").value;
age = parseInt(age);
condition = parseInt(condition);
switch (age) {
case 0:
price = price - 0.20 * price;
break;
case 1:
price = price - 0.35 * price;
break;
case 2:
price = price - 0.35 * price - (age - 3) * .10 * price;
break;
case 3:
price = 100000;
break;
case 4:
price = 75000;
break;
}
switch (condition) {
case 0:
price = price;
break;
case 1:
price = price - price * .10;
break;
}
document.getElementById("message").innerHTML = "Your" + name + " is valued at " + price + "today";
}
Solution at Codepen
function calculateValue() {
var price = document.getElementById("price").value;
var age = document.getElementById("age").value;
var condition = document.getElementById("condition").value;
var name = document.getElementById("name").value;
age = parseInt(age);
condition = parseInt(condition);
switch (age) {
case 0:
price = price - 0.20 * price;
break;
case 1:
price = price - 0.35 * price;
break;
case 2:
price = price - 0.35 * price - (age - 3) * .10 * price;
break;
case 3:
price = 100000;
break;
case 4:
price = 75000;
break;
}
switch (condition) {
case 0:
price = price;
break;
case 1:
price = price - price * .10;
break;
}
document.getElementById("message").innerHTML="Your"+name+" is valued at "+price+ "
today";
}`
The comments given by others are correct. You need to get the updated values on click of the submit button and hence all the variable will come inside the calculateValue function.
Wrap all the code in the document.ready method.
Related
That's my second script ever. I'm learning basics at the same time. I would like to engage different function on different option selected.
I try to give value to different option to use it later where the switch is.
It says cannot set property of null. If someone could explain me what I'm doing wrong it would be amazing. Please forgive me for silly mistakes, 3 days of learning in total, unfortunately theory doesn't work on me if i will not try it.
<html>
<body>
<div>
<h2> Daily calorie intake</h2>
<input type = "number" placeholder = "your height" id = "height" min = "1" max = "230"><p></p>
<input type = "number" placeholder = "your age" id = "age" min = "1" max = "120"><p></p>
<input type = "number" placeholder = "your weight" id = "weight" min = "1" max = "500"><p></p>
Your sex
<select name = "sex" id = "sex">
<option value = "1" id = "male">male</option>
<option value = "2" id = "female">female</select><p></p>
<button onclick="calculate()">Calculate</button>
</div>
<script>
var height = document.getElementById('height').onclick;
var age = document.getElementById('age').onclick;
var weight = document.getElementById('weight').onclick;
var sex = 1;
function calculate(height, age, weight, sex) {
switch(sex) {
case sex: 1
calculate = 66.5 * (13.75 * weight) + (5 * height) - (6.76 * age)
case sex: 2
calculate = 655.1 * (9.56 * weight) + (1.85 * height) - (4.68 * age)
break;
default: 1
}
document.getElementById('calculate').innerHTML = calculate
}
</script>
</body>
</html>
The error Uncaught TypeError: Cannot set property 'innerHTML' of null means that the object that you are calling .innerHTML on doesn't exist. In your case that's this line:
document.getElementById('calculate').innerHTML = calculate
and you get that error because you don't have an element with an id of calculate. If you don't have that element, you can't call .innerHTML on it.
You also need to get the data out of your form fields with the .value property, not the onclick property.
See additional comments below:
<html>
<head>
<title>Sample Page</title>
<style>
div { margin:1em; } /* adds vertical space before and after each div */
</style>
</head>
<body>
<div>
<!-- You can't have an <h2> if you don't already have an <h1> for it to be
a sub-section of. Don't use HTML elements because of how they style the output.
Use CSS to style. Also, don't use <p></p> to create vertical space. Again, use
CSS for style. -->
<h1> Daily calorie intake</h1>
<div><input type="number" placeholder="your height" id="height" min="1" max="230"></div>
<div><input type="number" placeholder="your age" id="age" min="1" max="120"></div>
<div><input type="number" placeholder="your weight" id="weight" min="1" max="500"></div>
<div>Your sex
<select id="sex">
<option value="1" id="male">male</option>
<option value="2" id="female">female</option>
</select>
</div>
<button>Calculate</button>
</div>
<div id="output"></div>
<script>
// Do your event binding in JavaScript, not in HTML
document.querySelector("button").addEventListener("click", calculate);
// Get references to the elements you'll need (not the value of their onclick properties)
var height = document.getElementById('height');
var age = document.getElementById('age');
var weight = document.getElementById('weight');
var sex = 1;
// You don't need any arguments because you already have references to the fields
// where the data is.
function calculate() {
// Declare the variable the will hold the result and don't use the
// name of the function as the name of the variable
let result = null;
switch(sex) {
// To get the data out of a form field, you must access its .value property
case sex: 1
result = 66.5 * (13.75 * weight.value) + (5 * height.value) - (6.76 * age.value);
break;
case sex: 2
result = 655.1 * (9.56 * weight.value) + (1.85 * height.value) - (4.68 * age.value);
break;
default: 1
}
// Make sure you reference elements that exist and don't use
// .innerHTML when there is no HTML in the string.
document.getElementById('output').textContent = result;
}
</script>
</body>
</html>
I hope this helps, this code is working
var height = document.getElementById('height');
var age = document.getElementById('age');
var weight = document.getElementById('weight');
var boton = document.getElementById('boton');
function calculate(height, age, weight, sex) {
switch(sex) {
case 1:
var calculo = 66.5 * (13.75 * weight) + (5 * height) - (6.76 * age);
break;
case 2:
var calculo = 655.1 * (9.56 * weight) + (1.85 * height) - (4.68 * age);
break;
default: 1
}
console.log(calculo);
return calculo;
}
boton.addEventListener('click', () => calculate(height.value, age.value, weight.value, 1));
<button id="boton"> Click me </button>
<input type = "number" placeholder = "your height" id = "height" min = "1" max = "230"/>
<input type = "number" placeholder = "your age" id = "age" min = "1" max = "120"/>
<input type = "number" placeholder = "your weight" id = "weight" min = "1" max = "500"/>
I have a purshase form with two items.
the first item which is a number box who identify how many adults in the trip.
the second item which is a number box who identify how many seniors in the trip.
for example :
I want when I select 2 in the first number box, the subtotal next to the number box show me the result of the calculation ( price of one person * 2)
also for seniors section.
I found a code which is work with select and option value :
update_amounts();
$('select').change(update_amounts);
function update_amounts() {
var sum = 0.0;
$('#tickets > tbody > tr').each(function () {
var qty = $(this).find('option:selected').val();
var price = $(this).find('.price').text().replace(/[^\d.]/, '');
var amount = (qty * price);
sum += amount;
$(this).find('.subtotal').text('{{ \App\Helpers\Themes::getSymbolForCurrency() }}' + amount);
});
$('#total').val('{{ \App\Helpers\Themes::getSymbolForCurrency() }}' + sum);
};
I have edited this code to my needs like this :
$('input').change(update_amounts);
function update_amounts() {
var sum = 0.0;
$('#tickets > tbody > tr').each(function () {
var qty1 = $(this).find('#adults').val();
var qty2 = $(this).find('#senior').val();
var price = $(this).find('.price').text().replace(/[^\d.]/, '');
var amount = ((qty1+qty2) * price);
sum += amount;
$(this).find('.subtotal').text('{{ \App\Helpers\Themes::getSymbolForCurrency() }}' + amount);
});
$('#total').val('{{ \App\Helpers\Themes::getSymbolForCurrency() }}' + sum);
};
But it doesn't work!
this is the Html code :
<input type="number" name="adult_count" id="adults" min="0" required>
<input type="number" name="senior_count" id="seniors" min="0" required>
this image shows what I need :
https://i.ibb.co/52qzkh7/stack2.png
How to I restrict a number entering into input field (numeric) greater than another number using JavaScript?
I used:
function numberalert(e) {
var matrictotal = document.getElementById("matrictotal").value;
var matricobtained = document.getElementById("matricobtained").value;
var intertotal = document.getElementById("intertotal").value;
var interobtained = document.getElementById("interobtained").value;
var bachelortotal = document.getElementById("bachelortotal").value;
var bachelorobtained = document.getElementById("bachelorobtained").value;
var mphilltotal = document.getElementById("mphilltotal").value;
var mphillobtained = document.getElementById("mphillobtained").value;
if (matricobtained > matrictotal || interobtained > intertotal || bachelorobtained > bachelortotal || mphillobtained > mphilltotal) {
alert("pleses provide obtained marks less then total marks");
e.returnValue = false;
e.preventDefault();
} else {
return true;
}
}
But after alert it allows number place in input field.
First, just get the object that represents each object then pass in the two methods into a helped method to do the actual comparison. If the values are not what you are looking for, then set the objects value to "" and highlight the textbox to show which one is wrong.
function numberalert(e) {
var matrictotal = document.getElementById("matrictotal");
var matricobtained = document.getElementById("matricobtained");
var intertotal = document.getElementById("intertotal");
var interobtained = document.getElementById("interobtained");
var bachelortotal = document.getElementById("bachelortotal");
var bachelorobtained = document.getElementById("bachelorobtained");
var mphilltotal = document.getElementById("mphilltotal");
var mphillobtained = document.getElementById("mphillobtained");
checkValue(matrictotal, matricobtained);
checkValue(intertotal, interobtained);
checkValue(bachelortotal, bachelorobtained);
checkValue(mphilltotal, mphillobtained);
}
function checkValue(total, obtained){
if (obtained.value > total.value) {
alert("Please provide obtained marks less then total marks: " + obtained.id);
obtained.value = "";
obtained.classList.add("error");
} else {
obtained.classList.remove("error");
return true;
}
}
.error {
border: 2px solid #FF0000;
}
<label for="matrictotal">matrictotal</label>
<input type="text" id="matrictotal" value="10">
<label for="matricobtained">matricobtained</label>
<input type="text" id="matricobtained" value="10">
<br />
<label for="intertotal">intertotal</label>
<input type="text" id="intertotal" value="10">
<label for="interobtained">interobtained</label>
<input type="text" id="interobtained" value="10">
<br />
<label for="bachelortotal">bachelortotal</label>
<input type="text" id="bachelortotal" value="10">
<label for="bachelorobtained">bachelorobtained</label>
<input type="text" id="bachelorobtained" value="10">
<br />
<label for="mphilltotal">mphilltotal</label>
<input type="text" id="mphilltotal" value="10">
<label for="mphillobtained">mphillobtained</label>
<input type="text" id="mphillobtained" value="10">
<button onclick=numberalert(this)>Check values</button>
Note : In Javascript there is no strictly greater than or strictly less than comparator .
In case if you need strictly greater than use
(a !==b && a > b) (or) (!(a < b))
Similarly for strictly less than use
(a !== b && a < b) (or) (!(a>b))
var toCheckNumber = 100;
validate = function(el, event) {
var errorText = document.getElementById('errorText');
errorText.innerHTML = "";
var x = event.which;
var value = el.value;
var number = 0;
switch (x) {
case 48: number =0;break;
case 49: number = 1; break;
case 50: number = 2; break;
case 51: number = 3; break;
case 52: number = 4; break;
case 53: number = 5; break;
case 54: number = 6; break;
case 55: number = 7; break;
case 56: number = 8; break;
case 57: number = 9; break;
case 8: number = -1; break;
case 46: number = -1; break;
default : event.preventDefault(); return ;
}
var tempval = (number !== -1) ? value * 10 + number : value;
if (!(tempval < toCheckNumber)) {
event.preventDefault();
errorText.innerHTML = "Enter number less than " + toCheckNumber;
}
}
<input type="number" onkeydown="validate(this,event)" onchange="document.getElementById('errorText').innerHTML=''">
<div id="errorText" style="color:red"></div>
I'm having some trouble getting my change() event working in jQuery. I am making a small program that converts temperatures to Kelvin, and I want the span that holds my value after conversion to update 1) every time the temperature to convert changes and 2) every time a different temperature scale is selected from the radio buttons.
Relevant Code:
$(document).ready(function() {
$('input[type=radio]').checkboxradio();
var temp = parseFloat()
$('input.listener').change(function() {
var name = $(this).attr("name");
var val = $(this).val();
switch (name) {
case 'unit':
var temperature = $('input#temp').val();
switch (val) {
case 'f':
$('span#output').html(((temperature - 32) / 1.8) + 273.15);
break;
case 'c':
$('span#output').html(temperature + 273.15);
break;
case 'r':
$('span#output').html(temperature / 1.8);
break;
}
case 'temp':
var u = $('input[name=unit]:checked').val();
switch (u) {
case 'f':
$('span#output').html(((val - 32) / 1.8) + 273.15);
break;
case 'c':
$('span#output').html(val + 273.15);
break;
case 'r':
$('span#output').html(val / 1.8);
break;
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
<fieldset>
<legend>Select a Unit to Convert to Kelvin: </legend>
<label for="fRadio">Fahrenheit</label>
<input id="fRadio" class="listener" type="radio" name="unit" value="f">
<label for="cRadio">Celsius</label>
<input id="cRadio" class="listener" type="radio" name="unit" value="c">
<label for="rRadio">Rankine</label>
<input id="rRadio" class="listener" type="radio" name="unit" value="r">
</fieldset>
</div>
<h2>Temperature Converter</h2>
<p>Type a value in the Fahrenheit field to convert the value to Kelvin:</p>
<p>
<label>Temperature</label>
<input id="temp" class="listener" type="number" value="32">
</p>
<p>Kelvin: <span id="output"></span></p>
My guess is I'm making a pretty dumb small mistake, but I can't seem to figure it out. Thanks for any and all help, suggestions, and solutions.
Two mistakes with your code:
Forgetting breaks; for the parent switch statement.
Forgetting name="temp" on the temperature field.
I changed the final temperature to a variable and made that the text of the output just so that there would be so many $('span#output').html(temperature);
Also, you should use the oninput event to detect a change for the number field.
$(document).ready(function() {
//$('input[type=radio]').checkboxradio();
var temp = parseFloat();
$('input.listener').on('change', updateTemp);
$('input.listener').on('input', updateTemp);
function updateTemp() {
var name = $(this).attr("name");
var val = $(this).val();
var final;
switch (name) {
case 'unit':
var temperature = $('input#temp').val();
switch (val) {
case 'f':
final = ((temperature - 32) / 1.8) + 273.15;
break;
case 'c':
final = temperature + 273.15;
break;
case 'r':
final = temperature / 1.8;
break;
}
break;
case 'temp':
var u = $('input[name=unit]:checked').val();
switch (u) {
case 'f':
final = ((val - 32) / 1.8) + 273.15;
break;
case 'c':
final = val + 273.15;
break;
case 'r':
final = val / 1.8;
break;
}
break;
}
$("#output").text(final);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
<fieldset>
<legend>Select a Unit to Convert to Kelvin: </legend>
<label for="fRadio">Fahrenheit</label>
<input id="fRadio" class="listener" type="radio" name="unit" value="f">
<label for="cRadio">Celsius</label>
<input id="cRadio" class="listener" type="radio" name="unit" value="c">
<label for="rRadio">Rankine</label>
<input id="rRadio" class="listener" type="radio" name="unit" value="r">
</fieldset>
</div>
<h2>Temperature Converter</h2>
<p>Type a value in the Fahrenheit field to convert the value to Kelvin:</p>
<p>
<label>Temperature</label>
<input id="temp" class="listener" type="number" name="temp" value="32">
</p>
<p>Kelvin: <span id="output"></span></p>
You should set one of the radio buttons as default with checked="checked". Then try following:
$(document).ready(function () {
$('input.listener').change(function () {
if ($(this).attr("type") == 'radio') {
//radio button changed
var u = $(this).val();
} else {
var u = $("input[type='radio']:checked").val();
}
var temperature = $('#temp').val();
switch (u) {
case 'f':
$('span#output').html(((temperature - 32) / 1.8) + 273.15);
break;
case 'c':
$('span#output').html(temperature + 273.15);
break;
case 'r':
$('span#output').html(temperature / 1.8);
break;
}
});
});
You do not have break; after
case 'unit':
and when var name = "temp"
var val = $(this).val();
the value of var val above would be a number in string format, so when you do val + something in case 'temp' the number is getting appended instead getting added or substracted. Use parseInt(val) to convert the value of input box to integer in case of 'temp'.
I have basic form with input text boxes and a checkboxes. The example currently shows two items. I am trying to use a switch case to determine what was checked and then calculate a total based on the quantity and user selection. I am getting an error inside the switch case for mufin1.checked == true. How can get the proper value to be returned? JSFIDDLE
JS
function charge(){
var q_muffin1 = document.getElementById('muffin_quantity1');
var muffin1 = document.getElementById('muffin1');
var q_muffin2 = document.getElementById('muffin_quantity2');
var muffin2 = document.getElementById('muffin2');
var charge;
var form = document.getElementById("muffinOrder");
var checkbox = form.getElementsByTagName("checkbox");
switch (checkbox.checked) {
case (mufin1.checked == true):
charge += q_muffin1 * muffin1;
break;
case (mufin2.checked == true):
charge += q_muffin2 * muffin2;
break;
default:
window.alert("Sorry, we are out of");
}
window.alert("Your total is: $" + charge);
return false;
}
html
<form action="" id="muffinOrder" onsubmit="return charge()">
Quantity: <input type="text" name="muffin_quantity1" id="muffin_quantity1"><input type="checkbox" name="muffin1" id="muffin1" value=".59">Blueberry Muffin .59¢<br />
Quantity: <input type="text" name="muffin_quantity2" id="muffin_quantity2"><input type="checkbox" name="muffin2" id="muffin2" value=".69">Banana Nutted Muffin .90¢<br />
<input type="submit" value="Submit" >
</form>
Assuming you don't want to handle the case where both checkboxes are checked, you could write it like this :
switch (true) {
case (mufin1.checked):
charge += q_muffin1 * muffin1;
break;
case (mufin2.checked):
charge += q_muffin2 * muffin2;
break;
default:
window.alert("Sorry, we are out of");
}
But your whole code would probably be cleaner without those variables xxx1 and xx2. I'm not sure of the whole goal but this could be something like that :
var charge = 0;
[1,2].forEach(function(id){
var muffin = document.getElementById('muffin'+id);
var q_muffin = document.getElementById('muffin_quantity'+id).value;
if (muffin.checked) charge += q_muffin;
});
window.alert("Your total is: $" + charge);
string str=Convert.toString(checkbox.checked);//int return With Null Value in ""
switch (str.toUpper()) {
case "TRUE":
charge += q_muffin1 * muffin1;
break;
case "FALSE":
charge += q_muffin2 * muffin2;
break;
default:
window.alert("Sorry, we are out of");
}
window.alert("Your total is: $" + charge);
CHECK This