Adding values in a checkbox, textbox and select using javascript - javascript

How will I add my checkbox value to the list of being added? If it is checked, it will be added to the total, if unchecked it will not be added. Or if it is already checked, then the customer unchecked it it will be deducted from the total.
javascript
function subtotal(){
$("#as").on('change',function(event){
var as = $(event.target).val();
var txt1 = $('#sff').val();
var txt2 = $('#osf').val();
var d = 0;
if ($('#cbx3').is(":checked")) {
d = parseFloat($("#cbx3").val(), 10);
var a = parseFloat(as, 10);
var b = parseFloat(txt1, 10);
var c = parseFloat(txt2, 10);
var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;
$('#st').val(total.toFixed(2));
});
HTML
<input type="text" id="txt1"/> //automatically shows value depending on a dropdownmenu
<input type="text" id="txt2"/> /automatically shows value depending on a dropdownmenu
<input type="text" id="gt"/> //this is where the answers shows
<input type="checkbox" id="cbx3"/>
<select id="as">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
the total should be equivalent to, textbox1 + textbox2 + dropdownmenu + checkbox
I have managed to add the textboxes and dropdown, the concern now is the checkbox.
thankyou...

After fixing ids of relevant items, this code calculates result
$("#as").on('change', function(event) {
var as = $(event.target).val();
var txt1 = 0;
var txt2 = 0;
if ($('#txt1').val())
txt1 = $('#txt1').val();
if ($('#txt2').val())
txt2 = $('#txt2').val();
var d = 0;
if ($('#cbx3').is(":checked")) {
d = parseFloat($("#cbx3").val(), 10);
}
var a = parseFloat(as, 10);
var b = parseFloat(txt1, 10);
var c = parseFloat(txt2, 10);
var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;
$('#gt').val(total.toFixed(2));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt1" />
<br />
<input type="text" id="txt2" />
<br />
<input type="text" id="gt" />
<br />
<input type="checkbox" id="cbx3" value="5" />
<br />
<select id="as">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<br />

your html is not clear.. please read comment line carefully and try this..
$("#as").on('change',function(){
var as = $(this).val(); //selected value on dropdown change
var txt1 = $('#sff').val(); // need to give the id of html element(not in your given html)
var txt2 = $('#osf').val(); // need to give the id of html element(not in your given html)
var d = 0;
if ($('#cbx3').is(":checked"))
d = parseFloat($("#cbx3").val(), 10); //it get the value from cbx3 element when it is checked otherwise value is 0
var a = parseFloat(as, 10);
var b = parseFloat(txt1, 10);
var c = parseFloat(txt2, 10);
var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;
$('#gt').val(total.toFixed(2));
});

You should have the calculation in a function that is called whenever the dropdown or the checkbox are changed. You can call the same function when initializing.
function subtotal(){
var as = $("#as").val();
var txt1 = $('#sff').val();
var txt2 = $('#osf').val();
var d = 0;
if ($('#cbx3').is(":checked")) {
d = parseFloat($("#cbx3").val(), 10);
var a = parseFloat(as, 10);
var b = parseFloat(txt1, 10);
var c = parseFloat(txt2, 10);
var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;
$('#st').val(total.toFixed(2));
};
$("#as").on('change',function(event){
subtotal();
}
$('#cbx3').click(function(){
subtotal();
});

js fiddle example
$("#as").on('change', function (event) {
subtotal();
});
$("#cbx3").click(function () {
subtotal();
});
function subtotal() {
var as = $("#as").val();
var txt1 = $('#txt1').val();
var txt2 = $('#txt2').val();
var d = 0;
if ($('#cbx3').is(":checked")) {
d = parseFloat($("#cbx3").val(), 10);
var a = parseFloat(as, 10);
var b = parseFloat(txt1, 10);
var c = parseFloat(txt2, 10);
var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;
$('#gt').val(total);
}
else {
$('#gt').val("0");
}
}
Try this above code

This should give you an idea.
(function () {
var $txt1 = $('#txt1');
var $txt2 = $('#txt2');
var $as = $('#as');
var $cbx3 = $('#cbx3');
var total = 0;
function calc() {
var as = Number($as.val());
var txt1 = Number($txt1.val());
var txt2 = Number($txt2.val());
total = txt1 + txt2;
if ($cbx3.is(":checked")) {
total += as;
}
$('#gt').val(total.toFixed(2));
}
$('#txt1, #txt2, #as').on('keyup', function () {
calc();
});
$('#cbx3, #as').on('change', function () {
calc();
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type="text" id="txt1" /></div>
<div><input type="text" id="txt2" /></div>
<div><input type="text" id="gt" /></div>
<input type="checkbox" id="cbx3" />
<select id="as">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>

Related

how to apply discount

I am building a ticket purchase system to get better in my javascript. I need help with some of my code. I can get the total of everything I want, but I am unable to get my discount function to work.
The total is calculated as (Show price * number of tickets) + (price of the delivery method)
when: the number of tickets > 6 the discount should be 10 per cent of the total.
when: the number of tickets > 10 the discount should be 15 per cent of the total.
the discount should be displayed separately to the total.
Dont mind some of the code that are comments as i used that as refrences.
This is the code:
java script:
//constants
const name = document.getElementById("fname");
const noofaddress = document.getElementById("noofaddress");
const shows = document.getElementById("shows");
const delivery = document.getElementById("delivery");
const displaytotal = document.getElementById("displaytotal");
const seatprice = document.getElementById("seatprice");
const order = document.getElementById("book");
const showselect = document.querySelector("#shows");
//event listeners
//order.addEventListener("click", gettotal);
//showselect.addEventListener("change", getshowprice);
//amount
var showprices = new Array();
showprices["79"]=79;
showprices["85"]=85;
showprices["67"]=67;
showprices["83"]=83;
function getshowprice() {
const display = document.getElementById("display");
var showprice = 0;
var form = document.forms["bookform"];
var selectedshow = form.elements["shows"]
showprice = showprices[selectedshow.value];
return showprice;
}
//event listeners
//order.addEventListener("click", gettotal);
//showselect.addEventListener("change", getshowprice);
//functions
//function calculateshowcost() {
//showcost = Number(this.value);
//document.getElementById('display').innerHTML = (`£${bookform.shows[bookform.shows.selectedIndex].value}`);
//}
//delivery funtion
//function getDeliveryValue() {
// document.getElementById('displaydelivery').innerHTML = (`£${bookform.delivery[bookform.delivery.selectedIndex].value}`);
//}
var deliveryprices = new Array();
deliveryprices["0"]=0;
deliveryprices["1.50"]=1.50;
deliveryprices["3.99"]=3.99;
function getdeliveryprice() {
const displaydelivery = document.getElementById("displaydelivery");
var deliveryprice = 0;
var form = document.forms["bookform"];
var selecteddelivery = form.elements["delivery"]
deliveryprice = deliveryprices[selecteddelivery.value];
return deliveryprice;
}
function gettotal() {
const displaytotal = document.getElementById("displaytotal");
const seats = document.getElementById("seats");
const noofseats = document.querySelector("#seats");
var showtotal = getshowprice()
var showdeliverytotal = getdeliveryprice()
var seatstotal = noofseats.value;
displaytotal.innerText = (`Total: £${(showtotal * seatstotal) + (showdeliverytotal)}`);
}
function getdiscount(products, showtotal, seatstotal) {
const discount = document.getElementById('discount');
var x = 6
if (seatstotal > x) {
(seatstotal > 10)
DiscountPrice = showtotal - (showtotal * .10)
}
else if
{
DiscountPrice = showtotal - (showtotal * .10)
}
return showtotal > y;
discount.innerText = (`discount: £${(DiscountPrice)}`);
// total
//function totalprice(event) {
//event.preventDefault()
//showprice = Number(showselect.value);
//totalnumberoftickets = Number(noofseats.value);
//totalcost = (showprice * totalnumberoftickets) + deliverycost;
//displaytotal.innerText = totalTickets;
//totalPriceResult.innerText = totalPrice;
//console.log("thank you for your order")
//}
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="theatre tickets page for assignment">
<link rel="stylesheet" href="theatretickets.css">
<title>Theatre Tickets</title>
</head>
<body class="background">
<script src="theatretickets.js"></script>
<img class="logoimage" src="" alt="logo">
<h1 class="title">Theatre Tickets</h1>
<!--navigation -->
<nav>
<ul class="a">
<li class="hp">Fruit Machine</li>
<li class="hp">Theatre Tickets</li>
</ul><br><br>
</nav>
<!--forms-->
<!--name-->
<form name="bookform" id="bookform" class="fullform" method="post">
<h2>Name</h2>
<label for="fname">Full Name</label><br>
<input type="text" id="fname" name="fname" required=""><br>
<!--address-->
<h2>Address</h2>
<label for="noofaddress">Full Address</label><br>
<input type="text" id="noofaddress" name="noofaddress" required=""><br>
<!--shows-->
<h2>Currently Available Shows</h2>
<select name="shows" id="shows" onchange="getshowprice()">
<option value="79" selected class="Phantom" id="Phantom">Phantom Of The Opera</option>
<option value="85" class="hamilton" id="hamilton">Hamilton</option>
<option value="67" class="lionking" id="lionking">Lion King</option>
<option value="83" class="misssaigon" id="misssaigon">Miss Saigon</option>
</select><br>
<label id="display"></label>
<!--delivery-->
<h2>Method Of Delivery</h2>
<select id="delivery" name="delivery" onchange="getdeliveryprice()">
<option id="eticket" value="0" selected>E-Ticket</option>
<option id="boxoffice" value="1.50">Collect from Box Office</option>
<option id="posted" value="3.99">Posted</option>
</select><br>
<!--display the delivery cost label-->
<label id="displaydelivery"></label>
<!--seats-->
<h2>Number Of Seats</h2>
<input type="number" id="seats" name="seats" min="1" required=""
placeholder="Number of Seats"><br>
<label id="seatprice"></label><br><br>
<!--book button-->
<button type="button" name="book" id="book" onclick="gettotal()">Book</button><br><br>
<div id= "displaytotal"></div>
<div id="discount"></div>
<div id="finalcost"></div>
</form>
</body>
When no. of ticket is greater than 10, you are still applying 10%, so replace it with 15%, and I think you should first check condition for 10 and then condition for 6 in your if-else, see the new edited code. I don't know what is y here so can't comment on that.
//constants
const name = document.getElementById("fname");
const noofaddress = document.getElementById("noofaddress");
const shows = document.getElementById("shows");
const delivery = document.getElementById("delivery");
const displaytotal = document.getElementById("displaytotal");
const seatprice = document.getElementById("seatprice");
const order = document.getElementById("book");
const showselect = document.querySelector("#shows");
//event listeners
//order.addEventListener("click", gettotal);
//showselect.addEventListener("change", getshowprice);
//amount
var showprices = new Array();
showprices["79"]=79;
showprices["85"]=85;
showprices["67"]=67;
showprices["83"]=83;
function getshowprice() {
const display = document.getElementById("display");
var showprice = 0;
var form = document.forms["bookform"];
var selectedshow = form.elements["shows"]
showprice = showprices[selectedshow.value];
return showprice;
}
//event listeners
//order.addEventListener("click", gettotal);
//showselect.addEventListener("change", getshowprice);
//functions
//function calculateshowcost() {
//showcost = Number(this.value);
//document.getElementById('display').innerHTML = (`£${bookform.shows[bookform.shows.selectedIndex].value}`);
//}
//delivery funtion
//function getDeliveryValue() {
// document.getElementById('displaydelivery').innerHTML = (`£${bookform.delivery[bookform.delivery.selectedIndex].value}`);
//}
var deliveryprices = new Array();
deliveryprices["0"]=0;
deliveryprices["1.50"]=1.50;
deliveryprices["3.99"]=3.99;
function getdeliveryprice() {
const displaydelivery = document.getElementById("displaydelivery");
var deliveryprice = 0;
var form = document.forms["bookform"];
var selecteddelivery = form.elements["delivery"]
deliveryprice = deliveryprices[selecteddelivery.value];
return deliveryprice;
}
function gettotal() {
const displaytotal = document.getElementById("displaytotal");
const seats = document.getElementById("seats");
const noofseats = document.querySelector("#seats");
var showtotal = getshowprice()
var showdeliverytotal = getdeliveryprice()
var seatstotal = noofseats.value;
displaytotal.innerText = (`Total: £${(showtotal * seatstotal) + (showdeliverytotal)}`);
}
function getdiscount(products, showtotal, seatstotal) {
const discount = document.getElementById('discount');
var x = 10;
var DiscountPrice = 0;
if (seatstotal > x) {
DiscountPrice = showtotal - (showtotal * .15)
}
else if
(seatstotal > 6)
DiscountPrice = showtotal - (showtotal * .10)
}
return showtotal > y;
discount.innerText = (`discount: £${(DiscountPrice)}`);
// total
//function totalprice(event) {
//event.preventDefault()
//showprice = Number(showselect.value);
//totalnumberoftickets = Number(noofseats.value);
//totalcost = (showprice * totalnumberoftickets) + deliverycost;
//displaytotal.innerText = totalTickets;
//totalPriceResult.innerText = totalPrice;
//console.log("thank you for your order")
//}

JavaScript function for calculating is not working?

this is my html input field
<input type="number" id="t1">
<br />
<button type="button" onclick="getvalue()">calculate</button>
<br />
<div id="l1">change<div>
this is my script
<script>
function getvalue() {
var l = document.getElementById('l1');
var c = document.getElementById('t1').value;
var lc = c + 200;
var tax = 2.1;
var tot = lc * tax;
l.innerHTML=tot;
}
</script>
and in text box i enter 10 so result is 441 this is the calculation 10+200 = 210
then 210*2.1 = 441
but in text box i enter 10 and click button i got 21420
the problem is var lc = c + 200; this is not calculate correct here its work 10200
and i try this method also var x = 200; var lc = c + x; this is also i got 10200 how can i fix this?
type of value in input number is string.
var val = document.getElementById('t1').value ;
console.log( typeof val ) ;
<input type="number" id="t1">
So you must convert to number like this:
var lc = Number(c) + 200 ;
//OR
var lc = parseInt(c) + 200 ;
//OR
var lc = parseFloat(c) + 200 ;
function getvalue() {
var l = document.getElementById('l1');
var c = document.getElementById('t1').value;
var lc = Number(c) + 200;
var tax = 2.1;
var tot = lc * tax;
l.innerHTML=tot;
}
<input type="number" id="t1">
<br />
<button type="button" onclick="getvalue()">calculate</button>
<br />
<div id="l1">change <div>
Even though the type of input is number, actually the value is of type string. That's why string concatenation is happening.
You can check the type of value with typeof operator.
To perform the intended arithmetic operation, you have to convert the value to number.
Please Note: It is better to use textContent instead of innerHTML when dealing with text only content.
var c = Number(document.getElementById('t1').value);
function getvalue() {
var l = document.getElementById('l1');
var c = document.getElementById('t1').value;
console.log(typeof(c)); //string
var lc = Number(c) + 200;
var tax = 2.1;
var tot = lc * tax;
l.textContent = tot;
}
<input type="number" id="t1"> <br />
<button type="button" onclick="getvalue()">calculate</button> <br />
<div id="l1">change <div>

On mouse hover, display the corresponding sizes of bars, as mentioned in the input field

function draw() {
var nums = document.getElementById("number").value.split(",");
console.log(nums);
var w = 40;
var factor = 20;
var n_max = Math.max.apply(parseInt, nums);
var h_max = factor * n_max;
console.log("h max is " + h_max);
console.log("n max is " + n_max);
//var h_max = Math.max(h);
//var a = parseInt(nums);
//var create = document.getElementById("shape");
for (var i = 0; i <= nums.length; i++) {
//var x = parseInt(nums[i]);
//var final_width = w / x;
var x_cor = (i + 1) * w;
//var y_cor = i * w * 0.5;
var h = factor * nums[i];
console.log(x_cor);
console.log(h);
//console.log(h_max);
var change = document.getElementById("histContainer");
//change.className = 'myClass';
var bar = document.createElement("div");
bar.className = 'myClass';
//var c_change = document.createElement("div2");
//change.appendChild(c_change);
change.appendChild(bar);
console.log(change);
//change.style.x.value = x_cor;
//change.style.y.value = y_cor;
bar.style.position = "absolute";
bar.style.top = (h_max - h) + "px";
//bar.style.transform = "rotate(-1deg)"
bar.style.left = i * w * 1 + "px";
bar.style.backgroundColor = "rgb(1,211,97)";
bar.style.opacity = "0.6";
bar.style.width = w + "px";
bar.style.height = h + "px";
//var color1 = document.getElementById("histContainer");
//var bar_color = document.createElement("div");
//color1.appendChild(change);
//bar.style.color = "rgba(1,211,97,0.6)";
}
}
function color() {
//draw();
var change1 = document.getElementsByClassName('myClass');
for (var i = 0; i < change1.length; i++) {
change1[i].style.backgroundColor = "rgb(255,0,27)";
console.log("Change1 = " + change1[i]);
}
// var bar1 = document.createElement("div2");
// change1.appendChild(bar1);
// console.log(change1);
//change1.style.backgroundColor = "rgb(1,,254,16)";
}
$(document).ready(function() {
$(document).on("mouseover", ".myClass", function() {
//var number = this.nums;
//$(this.nums).text($(this.nums).index());
//$(".myClass").append(nums);
var shade = $(this).css("opacity");
$(this).css("opacity", "1.0");
$(document).on("mouseout", ".myClass", function() {
$(this).css("opacity", shade);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Number:<input type="text" id="number" /><br>
<input type="button" id="button1" value="Draw" onClick="draw()" /><br>
<input type="button" id="button2" value="Change Color" onClick="color()" /><br>
<div id="histContainer" style="position: relative;"> </div>
<!-- <label for="mouseover" id="label1">Bar Value</label><br>
<input type="text" name="mouseover" id="text2" value="0"/><br> -->
<!-- <input type="button" id="color_change" style="float: right;" value="Change Color" /> -->
My Question is- I have entered some numbers as Input, and corresponding histogram is made according to the input values. Now, I have created mouseover() on each bar, and WANT to display their proportionate sizes, as given in input.
Can you provide me some help? Only thing which i figured out was- I have to call my draw function in the jQuery mouseover.
REFER TO the draw() and jQuery function(last)
I have figured out the answer. It is required that the nums array has to be re-declared again.
Solution Achieved
$(document).ready(function() {
$(document).on("mouseover",".myClass", function(){
//var numbers = $("#number").serialize();
//var number = this.nums;
var nums = document.getElementById("number").value.split(",");
$(this).text(nums[$(this).index()]);
//$(".myClass").append(nums);
var shade = $(this).css("opacity");
$(this).css("opacity", "1.0");
$(document).on("mouseout",".myClass", function() {
$(this).css("opacity", shade);
});
});
});

Calculate Total OnClick Custom Calculator

I just started learning javascript (sorry if my code is a mess) to be able to make a custom calculator and incorporate it in HTML.
I want my calculator to be able to calculate a men's/women's wilks through the user's inputs; however, I can't seem to get the value to display after clicking the calculate button.
The code works by taking in a body weight and total in either kg or pounds, since the formula uses kg if the user inputs in pounds then I convert their inputs to kg. The formula also depends on whether the person is a female or male. Both sex and units are chosen from dropdown menus.
Any help with making the calculate button work would be appreciated.
<script>
function computeWilks(){
var weight = document.getElementById('weight').value;
var total = document.getElementById('total').value;
if (document.getElementById('units').value === 'lb'){
var weight = (weight * 0.453592)
var total = (total * 0.453592)
}
if (document.getElementById('sex').value === 'female'){
var a = 594.31747775582;
var b = -27.23842536447;
var c = 0.82112226871;
var d = -0.00930733913;
var e = 4.731582e-05;
var f = -9.054e-08;
}
if (document.getElementById('sex').value === 'male'){
var a = -216.0475144;
var b = 16.2606339;
var c = -0.002388645;
var d = -0.00113732;
var e = 7.01863e-06;
var f = -1.291E-08;
}
var coeff = (500) / ((a) + (b * weight) + (c * Math.pow(weight, 2)) + (d * Math.pow(weight, 3)) + (e * Math.pow(weight, 4)) + (f * Math.pow(weight, 5)));
var wilks = (coeff * total)
document.getElementById('wilks').innerHTML = "Wilks = " + wilks;
</script>
<body>
<div class="w-calc">
<select id="sex">
<option value="male">male</option>
<option value="female">female</option>
</select>
<select id="units">
<option value="kg">kg</option>
<option value="lb">lb</option>
</select>
<p>Body Weight: <input id="weight" type="number"></p>
<p>Total: <input id="total" type="number"></p>
<input type="button" onClick="computeWilks()" value="Calculate"/>
<h2 id="wilks"></h2>
</div>
</body>
Try this
var a=0,b=0,c=0,d=0,e=0,f=0;
function computeWilks(){
var weight = document.getElementById('weight').value;
var total = document.getElementById('total').value;
if (document.getElementById('units').value === 'lb'){
weight = (weight * 0.453592)
total = (total * 0.453592)
}
if (document.getElementById('sex').value === 'female'){
a = 594.31747775582;
b = -27.23842536447;
c = 0.82112226871;
d = -0.00930733913;
e = 4.731582e-05;
f = -9.054e-08;
}else{
a = -216.0475144;
b= 16.2606339;
c= -0.002388645;
d = -0.00113732;
e = 7.01863e-06;
f = -1.291E-08;
}
var coeff = (500) / ((a) + (b * weight) + (c * Math.pow(weight, 2)) + (d * Math.pow(weight, 3)) + (e * Math.pow(weight, 4)) + (f * Math.pow(weight, 5)));
var wilks = (coeff * total);
document.getElementById('wilks').innerHTML = "Wilks = " + wilks;
}
<body>
<div class="w-calc">
<select id="sex">
<option value="male">male</option>
<option value="female">female</option>
</select>
<select id="units">
<option value="kg">kg</option>
<option value="lb">lb</option>
</select>
<p>Body Weight: <input id="weight" type="number"></p>
<p>Total: <input id="total" type="number"></p>
<input type="button" onClick="computeWilks()" value="Calculate"/>
<h2 id="wilks"></h2>
</div>
</body>
Try this:
<script>
function computeWilks(){
var weight = document.getElementById('weight').value;
var total = document.getElementById('total').value;
if (document.getElementById('units').value === 'lb'){
var weight = (weight * 0.453592)
var total = (total * 0.453592)
}
if (document.getElementById('sex').value === 'female'){
var a = 594.31747775582;
var b = -27.23842536447;
var c = 0.82112226871;
var d = -0.00930733913;
var e = 4.731582e-05;
var f = -9.054e-08;
}
else{
var a = -216.0475144;
var b = 16.2606339;
var c = -0.002388645;
var d = -0.00113732;
var e = 7.01863e-06;
var f = -1.291E-08;
}
var coeff = (500) / ((a) + (b * weight) + (c * Math.pow(weight, 2)) + (d * Math.pow(weight, 3)) + (e * Math.pow(weight, 4)) + (f * Math.pow(weight, 5)));
var wilks = (coeff * total)
document.getElementById('wilks').innerHTML = "Wilks = " + wilks;
}
</script>
<body>
<div class="w-calc">
<select id="sex">
<option value="male">male</option>
<option value="female">female</option>
</select>
<select id="units">
<option value="kg">kg</option>
<option value="lb">lb</option>
</select>
<p>Body Weight: <input id="weight" type="number"></p>
<p>Total: <input id="total" type="number"></p>
<input type="button" onClick="computeWilks()" value="Calculate"/>
<h2 id="wilks"></h2>
</div>
</body>
Try this:
<script>
function computeWilks(){
var weight = document.getElementById('weight').value;
var total = document.getElementById('total').value;
var values = {
a: { m: -216.0475144, f: 594.31747775582 },
b: { m: 16.2606339, f: -27.23842536447 },
c: { m: -0.002388645, f: 0.82112226871 },
d: { m: -0.00113732, f: -0.00930733913 },
e: { m: 7.01863e-06, f: 4.731582e-05 },
f: { m: -1.291E-08, f: -9.054e-08 }
}
if (document.getElementById('units').value === 'lb'){
var weight = (weight * 0.453592)
var total = (total * 0.453592)
}
var indexx = (document.getElementById('sex').value === 'female') ? 'f' : 'm'
var coeff = (500) / ((values.a[indexx]) + (values.b[indexx] * weight) + (values.c[indexx] * Math.pow(weight, 2)) + (values.d[indexx] * Math.pow(weight, 3)) + (values.e[indexx] * Math.pow(weight, 4)) + (values.f[indexx] * Math.pow(weight, 5)));
var wilks = (coeff * total)
document.getElementById('wilks').innerHTML = "Wilks = " + wilks;
}
</script>
Hope this helps.

how to use javascript onkeyup for multiple ids at sametime

I have 2 html textbox for users to enter numbers. To sum those numbers, I am passing the values to JavaScript variable and after addition displaying the result to html div section
<div class="input-left"><span><input class="textbox" id="left" name="count" type="text" size="5" value="" /></span></div>
<div class="input-right"><span><input class="textbox" id="right" name="count" type="text" size="5" value="" /></span></div>
<div id="result"> </div>
javascript:
document.getElementById('left').onkeyup = function() {
var a = parseFloat(this.value);
}
document.getElementById('right').onkeyup = function() {
var b = a + parseFloat(this.value);
document.getElementById("result").innerHTML = b || 0 ;
}
But I have an issue with JavaScript. It not displaying the result. How to add both functions in same onkeyup function.
FIDDLE SETUP
Try this:
window.onload = function(){
var left = document.getElementById('left');
var right = document.getElementById('right');
var result = document.getElementById("result");
left.onkeyup = calc;
right.onkeyup = calc;
function calc() {
var a = parseFloat(left.value) || 0;
var b = parseFloat(right.value) || 0;
result.innerHTML = a + b ;
}
}
JSFiddle: http://fiddle.jshell.net/gYV8Z/3/
Update: To hide the result in case the sum equals zero , change the last line like this:
result.innerHTML = ( a + b ) || "";
JSFiddle: http://fiddle.jshell.net/gYV8Z/4/
document.getElementById('left').onkeyup = function() {
var a = parseFloat(this.value);
}
document.getElementById('right').onkeyup = function() {
var b = a + parseFloat(this.value);
document.getElementById("result").innerHTML = b || 0 ;
}
it your code, var a is local variable. make it global variable.
but i would use this code.
function add(){
return parseFloat(document.getElementById('left').value) + parseFloat(document.getElementById('right').value);
}
document.getElementById('left').onkeyup = function() {
document.getElementById("result").innerHTML = add();
}
document.getElementById('right').onkeyup = function() {
document.getElementById("result").innerHTML = add();
}

Categories