This question already has answers here:
How can I check whether a radio button is selected with JavaScript?
(29 answers)
Closed 8 years ago.
Hi everyone can someone please help me with the following problem.
// i have written the problem inside the javascript
See http://jsfiddle.net/7Cmwc/3/ for example.
function calculate()
//If radiobutton with ID box3 is checked do this mybox1*mybox2+5
{
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
var result = document.getElementById('result');
var myResult = myBox1 * myBox2 + 5 ;
result.value = myResult;
}
//If radiobutton with ID box4 is checked do this mybox1*mybox2+10
{
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
var result = document.getElementById('result');
var myResult = myBox1 * myBox2 + 10 ;
result.value = myResult;
}
//If radiobutton with ID box3 is checked do this mybox1*mybox2+15
{
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
var result = document.getElementById('result');
var myResult = myBox1 * myBox2 + 15 ;
result.value = myResult;
}
And also i wonder what the difference is between jradiobutton and radiobutton?
Thanks in advance
Not saying I would do it this say, but this is a simple example to show you how it's done, at the very basic level.
function calculate() {
var myBox1 = document.getElementById('box1').value,
myBox2 = document.getElementById('box2').value,
myBox3 = document.getElementById('box3').checked,
myBox4 = document.getElementById('box4').checked,
myBox5 = document.getElementById('box5').checked,
result = document.getElementById('result'),
myResult;
if ( myBox3 ) {
myResult = myBox1 * myBox2 + 5 ;
result.value = myResult;
}
else if ( myBox4 ) {
myResult = myBox1 * myBox2 + 10 ;
result.value = myResult;
}
else if ( myBox5 ) {
myResult = myBox1 * myBox2 + 15 ;
result.value = myResult;
}
}
Like this...
function calculate() {
var test = document.getElementsByName("radioGroupName")
var sizes = test.length;
alert(sizes);
for (i = 0; i < sizes; i++) {
if (test[i].checked == true) {
whichIsCheckedValue = test[i].value;
whichIsChecked = i;
}
}
}
Once you have that, you can run your conditions. Of course, there is a better way, if you look at how this is done. You should have your conditions in the same place that it's identifying what was checked.
Related
The program will ask for all inputs and print everything but the variables all come up as undefined.
This is for a web application tied to a HTML document. No errors are thrown when it runs.
function driver(){
var plan1Code = "S";
var plan1Cost = 450;
var plan1Hours = 2.5;
var plan1Pics = 75;
var plan2Code = "G";
var plan2Cost = 750;
var plan2Hours = 5;
var plan2Pics = 125;
var plan3Code = "P";
var plan3Cost = 1000;
var plan3Hours = 8;
var plan3Pics = 225;
var retName = getName();
var retPlan = getPlan();
var retHours = getHours();
var retPics = getPics();
var baseCost, totalCost, upchargeTime, upchargeTimeCost, upchargePics, upchargePicsCost;
if (retPlan == plan1Code){
baseCost = plan1Cost;
upchargeTime, upchargeTimeCost = calcTimeUpcharge(retHours, plan1Hours);
upchargePics, upchargePicsCost = calcPicsUpcharge(retPics, plan1Pics);
}
else if (retPlan == plan2Code){
baseCost = plan2Cost;
upchargeTime, upchargeTimeCost = calcTimeUpcharge(retHours, plan2Hours);
upchargePics, upchargePicsCost = calcPicsUpcharge(retPics, plan2Pics);
}
else if (retPlan == plan3Code){
baseCost = plan3Cost;
upchargeTime, upchargeTimeCost = calcTimeUpcharge(retHours, plan3Hours);
upchargePics, upchargePicsCost = calcPicsUpcharge(retPics, plan3Pics);
}
totalCost = calcTotalCost(baseCost, upchargeTimeCost, upchargePicsCost);
print(retName, retPlan, baseCost, upchargeTime, upchargeTimeCost, upchargePics, upchargePicsCost, totalCost);
}
function getName(){
var text;
var name = prompt("Enter your name");
if (name == null) {
text = "Please enter a valid name";
}
}
function getPlan(plan){
var plan = prompt("Enter the selected package");
}
function getHours(hours){
var hours = prompt("Enter anticipated coverage hours");
}
function getPics(pics){
var pics = prompt("Enter anticipated number of pictures");
}
function calcTimeUpcharge(hours, baseHours){
upchargeTime = hours - baseHours;
var price;
if (upchargeTime>0){
var upchargeTimeUnits = Math.ceil((upchargeTime)/.5);
upchargeTimeCost = upchargeTimeUnits * 50;
}
else {
upchargeTime = 0;
upchargeTimeCost = 0;
}
return upchargeTime, upchargeTimeCost;
}
function calcPicsUpcharge(pics, basePics){
upchargePics = pics - basePics;
if (upchargePics>0){
upchargePicsunits = Math.ceil((upchargePics)/10);
upchargePicsCost = upchargePicsunits*40;
}
else {
upchargePics = 0;
upchargePicsunits = 0;
}
return upchargePics, upchargePicsCost;
}
function calcTotalCost(baseCost, timeCost, picsCost){
return baseCost + timeCost + picsCost;
}
function print(retName, retPlan, baseCost, upchargeTime, upchargeTimeCost, upchargePics, upchargePicsCost, totalCost){
document.write(retName + ", thanks for using Photosarus!" + "\n");
document.write("<br><br>");
document.write("You selected plan " + retPlan + " at a cost of "+ baseCost );
document.write("<br><br>");
document.write(upchargeTime + "additional hours at a cost of "+ upchargeTimeCost);
document.write("<br><br>");
document.write(upchargePics + "additional pictures at a cost of "+ upchargePicsCost);
}
I expect the output to say
Bill, thanks for using Photosarus!
You selected plan S at a cost of $450
0 additional hours at a cost of $0
0 additional pictures at a cost of $0
But instead I get
undefined, thanks for using Photosarus!
You selected plan undefined at a cost of undefined
undefined additional hours at a cost of undefined
undefined additional pictures at a cost of undefined
You need to return the values from the functions:
function getName(){
var text;
var name = prompt("Enter your name");
if (name == null) {
text = "Please enter a valid name";
}
return name;
}
function getPlan(plan){
var plan = prompt("Enter the selected package");
return plan;
}
function getHours(hours){
var hours = prompt("Enter anticipated coverage hours");
return hours;
}
function getPics(pics){
var pics = prompt("Enter anticipated number of pictures");
return pics;
}
I have two function creating the present value from the future value:
function calculate_zins1() {
var myBox1 = document.getElementById('box1').value;
var zins1 = document.getElementById("zinsValue").value;
var zins1_1 = parseInt(1) / (Math.pow(1 + (zins1/100),1)) ;
var result = document.getElementById('result');
var myResult = myBox1 * zins1_1;
result.value = myResult;
}
function calculate_zins2() {
var myBox1 = document.getElementById('box2').value;
var zins1 = document.getElementById("zinsValue").value;
var zins1_1 = parseInt(1) / (Math.pow(1 + (zins1/100),2)) ;
var result2 = document.getElementById('result2');
var myResult = myBox1 * zins1_1;
result2.value = myResult;
}
Now I want to add result + result2.
Can anybody help me? Thanks.
You need to have the function return the values you want.
function calculate_zins1() {
var myBox1 = document.getElementById('box1').value;
var zins1 = document.getElementById("zinsValue").value;
var zins1_1 = parseInt(1) / (Math.pow(1 + (zins1/100),1)) ;
var result = document.getElementById('result');
var myResult = myBox1 * zins1_1;
result.value = myResult;
return myResult;
}
function calculate_zins2() {
var myBox1 = document.getElementById('box2').value;
var zins1 = document.getElementById("zinsValue").value;
var zins1_1 = parseInt(1) / (Math.pow(1 + (zins1/100),2)) ;
var result2 = document.getElementById('result2');
var myResult = myBox1 * zins1_1;
result2.value = myResult;
return myResult;
}
sum = calculate_zins1() + calculate_zins2()
var result = document.getElementById('result');
var result2 = document.getElementById('result2');
var sum = Number(result.value) + Number(result2.value);
I think the suggestion of simply making the functions return the calculated value is insufficient. They should either return the value or set it as the value property of the input element, they shouldn't do both. A function doing two different things is, especially when it's side effects, bad design.
Can't you just return the value and do:
var sum = calculate_zins1() + calculate_zins2()?
Or you could maybe pass as reference, to do that make the result an object:
var results = { result1 : null, result2 : null}
calculate_zins1(results) {
...
results.result1 = result.value;
}
calculate_zins2(results) {
...
results.result2 = result2.value;
}
calculate_sum() {
return sum = results.result1 + results.result2;
}
Try this:
var result, result2;
function calculate_zins1() {
var myBox1 = document.getElementById('box1').value;
var zins1 = document.getElementById("zinsValue").value;
var zins1_1 = parseInt(1) / (Math.pow(1 + (zins1/100),1)) ;
var result = document.getElementById('result');
var myResult = myBox1 * zins1_1;
result.value = myResult;
}
function calculate_zins2() {
var myBox1 = document.getElementById('box2').value;
var zins1 = document.getElementById("zinsValue").value;
var zins1_1 = parseInt(1) / (Math.pow(1 + (zins1/100),2)) ;
var result2 = document.getElementById('result2');
var myResult = myBox1 * zins1_1;
result2.value = myResult;
}
var sum = result.value + result2.value;
I have tried to do the calculation of the marks obtained and want it to display in a table. As in the javascript, the calculation that i have did is as below:
<script>
function kira1() {
var myeBook = document.getElementById('eBook').value;
var result = document.getElementById('result1');
var myResult = myeBook * 3;
result.value = myResult;
}
function kira2() {
var mybukuTeks = document.getElementById('bukuTeks').value;
var result = document.getElementById('result2');
var myResult = mybukuTeks * 3;
result.value = myResult;
}
function kira3() {
var mymodul = document.getElementById('modul').value;
var result = document.getElementById('result3');
var myResult = mymodul * 2;
result.value = myResult;
}
function kira4() {
var myjurnal = document.getElementById('jurnal').value;
var result = document.getElementById('result4');
var myResult = myjurnal * 2;
result.value = myResult;
}
function kira5() {
var myePembelajaran = document.getElementById('ePembelajaran').value;
var result = document.getElementById('result5');
var myResult = myePembelajaran * 1;
result.value = myResult;
}
function kira6() {
var myinovasi = document.getElementById('inovasi').value;
var result = document.getElementById('result6');
var myResult = myinovasi * 1;
result.value = myResult;
}
function kira7() {
var a = document.getElementById('result1').value;
var b = document.getElementById('result2').value;
var c = document.getElementById('result3').value;
var d = document.getElementById('result4').value;
var e = document.getElementById('result5').value;
var f = document.getElementById('result6').value;
var result = document.getElementById('jumlah_1A');
var myResult = a + b + c + d + e + f;
result.value = myResult;
}
</script>
But when i tried to run it, the total is not displaying as i want it to.
This is the output:
The total should be display at the "Jumlah Skor 1A"
Try using:
document.getElementById('jumlah_1A').innerHTML
i.e. document.getelementbyid('idname').innerHTML
As per my understanding 'jumlah_1A' is a div not a Input box. so use .innerHTML instead of .value
W3school Link:
http://www.w3schools.com/jsref/prop_html_innerhtml.asp
var a = parseInt(document.getElementById('result1').value);
var b = parseInt(document.getElementById('result2').value);
var c = parseInt(document.getElementById('result3').value);
var d = parseInt(document.getElementById('result4').value);
var e = parseInt(document.getElementById('result5').value);
var f = parseInt(document.getElementById('result6').value);
Convert all to integer before adding the values.
if jumlah_1A element is not a textbox then do
result.innerHTML = myResult;
I am absolutely stumped, I have been working on this for weeks and have come to the conclusion that my knowledge is too limited to figure this out
ok, I have a page in my customer portal where employees can enter end of day sales reports. The first half of the page is input fields with dollar amounts and profits calculated by a percentage. Funny thing is it works on my website but not on jsfiddle.
the second part is a devices sold section using selects and calculations for price, cost and profit
there are 2 parts to the script and it gets crazy when I put them together, they dont work at all
I tried to post the entire page and script here but it was too long
here is the script
function Adder() {
var ppc = parseFloat(document.form.ppc.value);
var tmo = parseFloat(document.form.tmo.value);
var cf = parseFloat(document.form.cf.value);
var act = parseFloat(document.form.act.value);
var fla = parseFloat(document.form.fla.value);
var misc = parseFloat(document.form.misc.value);
var exp = parseFloat(document.form.exp.value);
var prof1 = parseFloat(document.form.prof1.value);
var prof2 = parseFloat(document.form.prof2.value);
var prof3 = parseFloat(document.form.prof3.value);
var prof4 = parseFloat(document.form.prof4.value);
var prof5 = parseFloat(document.form.prof5.value);
var result1 = ppc * 0.12;
document.form.prof1.value = result1.toFixed(2);
var result2 = tmo * 0.015;
document.form.prof2.value = result2.toFixed(2);
var result3 = cf * 0.21;
document.form.prof3.value = result3.toFixed(2);
var result4 = act * 35;
document.form.prof4.value = result4.toFixed(2);
var result5 = fla * 60;
document.form.prof5.value = result5.toFixed(2);
var result6 = ppc + tmo + cf + prof4 + prof5 + misc - exp;
document.form.sum1.value = result6.toFixed(2);
var result7 = prof1 + prof2 + prof3 + prof4 + prof5 + misc - exp;
document.form.total1.value = result7.toFixed(2);
}
var item = document.getElementById('item');
var item1 = document.getElementById('item1');
var item2 = document.getElementById('item2');
var item3 = document.getElementById('item3');
var item4 = document.getElementById('item4');
var item5 = document.getElementById('item5');
var item6 = document.getElementById('item6');
item.onchange = function () {
price.innerHTML = "$" + this.value;
cost.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
qty.value = 1; //Order 1 by default.
add();
};
qty.onchange = function () {
add();
};
item1.onchange = function () {
price1.innerHTML = "$" + this.value;
cost1.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
qty1.value = 1; //Order 1 by default.
add();
};
qty1.onchange = function () {
add();
};
item2.onchange = function () {
price2.innerHTML = "$" + this.value;
cost2.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
qty2.value = 1; //Order 1 by default.
add();
};
qty2.onchange = function () {
add();
};
item3.onchange = function () {
price3.innerHTML = "$" + this.value;
cost3.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
qty3.value = 1; //Order 1 by default.
add();
};
qty3.onchange = function () {
add();
};
item4.onchange = function () {
price4.innerHTML = "$" + this.value;
cost4.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
qty4.value = 1; //Order 1 by default.
add();
};
qty4.onchange = function () {
add();
};
item5.onchange = function () {
price5.innerHTML = "$" + this.value;
cost5.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
qty5.value = 1; //Order 1 by default.
add();
};
qty5.onchange = function () {
add();
};
item6.onchange = function () {
price6.innerHTML = "$" + this.value;
cost6.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
qty6.value = 1; //Order 1 by default.
add();
};
qty6.onchange = function () {
add();
};
function add() {
var inputs = document.getElementsByTagName('input');
var selects = document.getElementsByTagName('select');
var total = 0;
var taxes = 0;
for (var i = 0; i < selects.length; i++) {
var sum = 0;
var price = (parseFloat(selects[i].value)) ? parseFloat(selects[i].value) : 0;
var cost = (parseFloat(selects[i][selects[i].selectedIndex].getAttribute('value2'))) ? parseFloat(selects[i][selects[i].selectedIndex].getAttribute('value2')) : 0;
var qty = (parseFloat(inputs[i].value)) ? parseFloat(inputs[i].value) : 0;
sum += (price - cost) * qty;
total += sum;
if (i === 0) {
document.getElementById('result').innerHTML = "$" + sum.toFixed(2);
} else {
document.getElementById('result' + i).innerHTML = "$" + sum.toFixed(2);
}
}
document.getElementById('total').innerHTML = "$" + total.toFixed(2);
}
and the jsfiddle for everything together, I just cant figure it out
i have my invoice js script done and working, but i cant figure out how to round the grand total to 2 decimal spaces.
js:
var item = document.getElementById('item');
var item1 = document.getElementById('item1');
var item2 = document.getElementById('item2');
var item3 = document.getElementById('item3');
item.onchange = function() {
price.innerHTML = "$" + this.value;
qty.value = 1; //Order 1 by default.
add();
};
qty.onchange = function() {
add();
}
item1.onchange = function() {
price1.innerHTML = "$" + this.value;
qty1.value = 1; //Order 1 by default.
add();
};
qty1.onchange = function() {
add();
}
item2.onchange = function() {
price2.innerHTML = "$" + this.value;
qty2.value = 1; //Order 1 by default.
add();
};
qty2.onchange = function() {
add();
}
item3.onchange = function () {
price3.innerHTML = "$" + this.value;
qty3.value = 1; //Order 1 by default.
add();
};
qty3.onchange = function() {
add();
}
function add() {
var inputs = document.getElementsByTagName('input');
var selects = document.getElementsByTagName('select');
var total = 0;
for (var i = 0; i < selects.length; i++) {
var sum = 0;
var price = (parseFloat(selects[i].value) )?parseFloat(selects[i].value):0;
var qty = (parseFloat(inputs[i].value) )?parseFloat(inputs[i].value):0;
sum += price * qty;
total += sum * 1.06
if(i == 0){
document.getElementById('result').innerHTML = "$" + sum;
}else{
document.getElementById('result'+i).innerHTML = "$" + sum;
}
};
document.getElementById('Total').innerHTML = "$" + total;
}
ive tried 3 or 4 methods, but due to my lack of experience with js, i just cant get right
Use:
.toFixed(2);
on the grand total
Like:
1.23898.toFixed(2); // 1.24
Do you want smt like this: 1.23756 -> 1.24 ?
Then you can use toFixed(num)
var num = 1.23756;
console.log(num.toFixed(2)); // 1.24
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
Try this:
Convert a number into a string, keeping only two decimals:
var num = 5.56789;
var n=num.toFixed(2);
The result of n will be:
5.57