Multiply in a return && Decimal rounder

JavaScript
1

Hi,

I’m using this code which I got of this site.
I want to learn javascript a bit and at the same time change up this code to be of use in a project. So far so good.

But now I’m stuck with this issue’s.

1: I have a seperately bagged checkbox which would multiply my total with 0.5.

I thought I would multiply the cakeSelect.value because this is the value that needs multiplying. Though this gives me no result. So I’m most likely using that return wrong.

//Set up an associative array
//The keys represent the size of the cake
//The values represent the cost of the cake i.e A 10" cake cost's $35
var cupcake_prices = new Array();
cupcake_prices["cc12"]=12;
cupcake_prices["cc18"]=18;
cupcake_prices["cc24"]=24;
cupcake_prices["cc30"]=30;
cupcake_prices["cc36"]=36;
cupcake_prices["cc42"]=42;
cupcake_prices["cc48"]=48;
cupcake_prices["cc54"]=54;
cupcake_prices["cc60"]=60;



//Set up an associative array 
//The keys represent the filling type
//The value represents the cost of the filling i.e. Lemon filling is $5,Dobash filling is $9
//We use this this array when the user selects a filling from the form
var topping_prices = new Array();
topping_prices["Standaard"]=1;
topping_prices["Boterroom"]=1.35;
topping_prices["Logo/Foto"]=1.45;
topping_prices["Boterroomfondant"]=1.6;
topping_prices["Afgewerkt"]=2.1;


// getCakeSizePrice() finds the price based on the size of the cake.
// Here, we need to take user's the selection from radio button selection
function getCupCakeSizePrice() {
	var cakeRadio = document.getElementsByName('selectedcupcake');

	for (i=0; i < cakeRadio.length; i++) {
		if (cakeRadio[i].checked) {
			user_input = cakeRadio[i].value;
		}
	}

	return cupcake_prices[user_input];
}

// getFillingPrice() finds the price based on the filling of the cake.
// Here, we need to take user's the selection from selection list
function getToppingPrice() {
	var cakeSelect = document.getElementById('topping');

	//alert(filling_prices[cakeSelect.value]);

	return topping_prices[cakeSelect.value];
}

// getCandlesPrice() finds the price based if Candles is selected or not.
function getSeperatlyPrice() {
	var cakeSeperatly = document.getElementById('baggedseperatly');

  if(cakeSeperatly.checked) {
		return(cakeSelect.value * 5);
	} else {
		return(0);
	}
}


// getInscriptionPrice() finds the price based if Inscription is selected or not.
function getInscriptionPrice() {
	var cakeInscription = document.getElementById('includeinscription');

	if(cakeInscription.checked) {
		return(20);
	} else {
		return(0);
	}
}

function calculateTotal() {
	var total = getCupCakeSizePrice() * getToppingPrice() + getSeperatlyPrice() + getInscriptionPrice();
  var totalEl = document.getElementById('totalPrice'); 

	document.getElementById('totalPrice').innerHTML = "Your Total is: $" + total;
	totalEl.style.display = 'block';
}

function hideTotal() {
	var totalEl = document.getElementById('totalPrice');
	totalEl.style.display = 'none';
}
  1. Less important issue is that my total should be rounded to a two decimal number. Could anybody point me to Math .js example that’s clear on how this works?

Any other remarks are always welcome. I’m Learning & can take criticism!! ::smile:

2

JS does not have associative arrays: example

[12, 18, 24, 30, 36]

Those values in the array have keys, but you can’t set them, they’re 0, 1 2, 3 and 4.

What you’re doing here is not correct, JS is not PHP:

cupcake_prices["cc12"]=12;

It has objects, which can be set like the above:

const cupcakePrices = {}
cupcakePrices["cc12"]=12;

Or more simply:

const cupcakePrices = { cc12: 12, cc18: 18 }

Then

cupcakePrices[userInput]

And it has maps

const cupcakePrices = new Map()
cupcakePrices.set("cc12", 12)

Or more simply:

const cupcakePrices = new Map([["cc12", 12],["cc18", 18]]);

Then

cupcakePrices.get(userInput)
2 Likes
3

Second issue: in common with most languages, JS does not have decimal numbers, it only has an approximation of them (floating point numbers). And anyway, you can’t really round the number itself to a certain number of decimal places (that doesn’t really make sense, rounding/padding values is visual only), so you convert it to a string and then cut that to the right number of places (the toFixed method does this):

const example = 3.126;
const twoPlaces = example.toFixed(2);
// This will be the string "3.12"

As you can see, that isn’t what you might call correct (you might do, it depends how you classify rounding!). Simplest way to not have this problem is to multiply all the amounts by 100 to begin with (eg so they’re all in cents). Then all the calculations are done in integers. Then if you want $ at the end, divide by 100, and you get the result you’re looking for.

1 Like
4

Hi DanCouper,

I didn’t get it completely the first answer, I thought I did.
But then I got stuck in the logic.

the userInput is this a variable or is this a syntax of javascript?

And how does this new Map system works for the multiplier?

I got the second anwser and I got it to work with a const.

5

It’s a variable, you wrote it in your code as user_input, I just mistyped

There one basic data structure in JS, Objects. You define using object literals like:

const example = {
  foo: 1
  bar: 2
}

The keys are strings. Values are anything.

Set values like example.foo = 2.
Access values like example.foo.
Access values you don’t know the key for (as is the case for you, where the name of the key is held in a variable) like example[someVariable]

Arrays are a special type of object where the keys are integers that go from 0 upwards, and they automatically reindex those numbers when you add or remove things. The values can be anything. They are an ordered lost of values.

And you define using array literals like:

const example = [10, 20, 45, 74];

Don’t do this: new Array(). You can do this Array() (Array is a constructor function that does not need the new keyword), but the array literal syntax above is how you would do it 99.9% of the time.

You can access like example[0]
You can set directly like example[0] = "new value"

A Map is another special type of object, which is an ordered collection of key value pairs. The keys and the values can be of any type. It is basically what is called an associative array in other languages.

You can just use objects, thats easiest thing:

const cupcakePrices = {
  cc12: 12,
  cc18: 18,
  cc24: 24,
  ...and so on
}

What do you mean by “got it to work with a const”? There isn’t really anything special about const (or let, or var)

1 Like