Since you asked for an explanation, instead of just the answer, here's your explanation:
As I said in my comment, there are multiple problems with your code, I will address each in a comment adjacent or below the problem, indicating what is wrong, and why.
function calculateShipping() } // This is not an opening bracket.
// All functions(by my understanding of js) need an opening curly bracket({)
// in order to begin their declaration. You also need a closing curly bracket
// (}) to end it.
var price = parseFloat(document.getElementById('price').value);
This will add $1.50 to any purchases that are less than or equal
// On top of the fact that the 'this' keyword is reserved, the browser is
// going to treat this as multiple undefined variables, objects, etc,
// and unless this line is commented out, as this explanation is, your code
// will not work.
to $25.00.
// ^ same thing here; 'to' is undefined, as is $25, which is likely going to be
// treated as an variable holding an object. This is because the dot(.)
// is used to access either properties(variables) or methods(functions) of an
// object.
if (price <= 25){
price = (price) + 1.5;
} else {
//return price * 10 / 100
var percentToAdd=(price) * .1;
price=(price)+(percentToAdd);
}
document.getElementById('result').innerHTML='Total Order Cost:
'+price;
// Javascript does not do multi-lines like php; you either have to escape
// them or, you have to quote them. I will give examples of this below.
// And here.. here you do nothing. As noted above, you need a closing
// curly bracket to end your function declaration.
And now for the proper way to code this function;
function calculateShipping() { // opening curly brackte
var price = parseFloat(document.getElementById('price').value);
/* This will add $1.50 to any purchases that are less than or equal
to $25.00.
*/
// ^ a multi-line comment.
if (price <= 25){
price = (price) + 1.5;
// This is really fine, except you don't really need () around 'price'.
} else {
//return price * 10 / 100
var percentToAdd=(price) * .1;
price=(price)+(percentToAdd);
// Same thing as above regarding parenthesis.
}
document.getElementById('result').innerHTML='Total Order Cost: \
'+price; // Escape the line ^
} // Finally, end the function declaration.
As noted though, there are multiple ways to account for extra lines; here is one:
var some_var = 'this is a string ' +
'this is another string';
Given the above, the contents of some_var will be:
this is a string this is another string
If you want your code to be on separate lines, that's another story. You need html for that.. specifically; break tags:
var some_var = 'this is a string<br />this is a string on another line';
And last but not least, your if/else can be reduced to a ternary operator; a ternary operator is a (usually) one line method of if/else clauses. Here is an example:
var some_var = (1 < 2) ? 'true' : 'false';
// boolean is true is false
In the above, 1 is less than 2, and thus, some_var will be set to the string 'true'. Otherwise, it will be set to 'false'. Thus, your above if/else can be simplified to:
price = (price <= 25)?(price+1.5):(price+(price* .1));
