0

I have been working on code to calculate shipping costs. I had the code working in HTML but realized that it needed to be in XHTML 1.0 Strict. Knowing that it worked I started working on the validation errors. I now have it error free but the code stopped outputting the Total Cost. Where am I going wrong here?

updated code

 <!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> "Calculate Shipping" </title>
<script type="text/javascript">
  // <![CDATA[
function calculateShipping() }
    var price = parseFloat(document.getElementById('price').value);
    //This will add $1.50 to any purchases that are less than or equal
to $25.00.
    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; 

// ]]>
</script>
</head>

<body>
<h1>Enter Purchase Price</h1>

<form action="#">
<div id="result">
<input type="text" name="price" id="price" />
<input type="button" value="Submit" onclick=calculateShipping(); return
false;" />
</div>
</form>
</body>
</html>
user3199950
  • 25
  • 3

3 Answers3

1

The browser might be trying to evaluate those CDATA declarations as Javascript (remember that most browsers will parse the XHTML as if it were HTML). Try putting them inside Javascript comments.

<script type="text/javascript">
  // <![CDATA[
  // ]]> 
</script>

Another possibility is putting the Javascript in a separate file instead of trying to embed it into the document

 <script type="text/javascript" src="shipping.js"></script>

Finally, you might want to check out this similar question: When is a CDATA section necessary within a script tag?

Community
  • 1
  • 1
hugomg
  • 68,213
  • 24
  • 160
  • 246
  • I believe I made the correct changes as you suggested but still the script does not output the Price + shipping. Any ideas? – user3199950 Jan 16 '14 at 02:55
1

You are missing a final closing }

also use comments on your CDATA statements or remove them (as missingno sez).

Hogan
  • 69,564
  • 10
  • 76
  • 117
1

Here's what's wrong:

  • You're missing a closing } on your function;
  • You're performing a lower-than operation on a string. That's just a really bad habit.
  • Your CDATA tag may be interpreted as JavaScript.

Instead of using parseFloat in all the wrong places, just put the parseFloat around your variable definition:

var price = parseFloat(document.getElementById('price').value);

Also, make sure you close your brackets. Just put a } on the last line, in this case, and your function will be closed correctly

Finally, you should really put a double slash before each of the CDATA parts. Like missingno said:

<script type="text/javascript">
  // <![CDATA[
  // ]]> 
</script>

Comment it out by using single line comments.

PS: try just using HTML5, with this doctype:

<!DOCTYPE html>

Also, you should make sure all your quotes are closed. If you are running this through a debugger and it is giving you no errors, you should really use a better debugger. I've fixed your code and put it in a jsbin, you can see it here. Try putting your code in there next time. I'm sure it'll give you all the errors you're getting.

PS: you might not be getting errors because your "js error debugger" only checks .js files, and you've made your script an inline script. Try putting just the JS code in the debugger next time.

Joeytje50
  • 18,636
  • 15
  • 63
  • 95
  • "lower than" should be "less than", and that's not a problem. `"20" < 25` works fine. Your other points are reiterating answers posted 5 and 7 minutes before yours. – user229044 Jan 15 '14 at 21:00
  • Either way it's terribly bad habit to go performing mathematical operations on strings. If you don't watch out with that, you might go adding things to it, and "20" + 5 < 30 doesn't work fine anymore. – Joeytje50 Jan 15 '14 at 21:01
  • Yes, I agree, but it's not actually the source of any problem the user is having. – user229044 Jan 15 '14 at 21:02
  • Not really; I would expect "You should use `parseFloat` *before* comparing the value with `value < 25`" to have been added as a comment, because again, all the other content of your answer was covered already by people who got here before you. – user229044 Jan 15 '14 at 21:05
  • 1
    But then again, that'd be an answer, not really a comment, right? I prefer to give an answer that is as complete as possible when I post one. – Joeytje50 Jan 15 '14 at 21:11
  • I have removed the unnecessary parsefloats and have just entered it around my price definition as suggested by joeytj350. It still does not output and throws no errors in a debugger. – user3199950 Jan 16 '14 at 02:23
  • @user3199950 I've put up a link with all errors fixed. And there were a lot of them. Try using [this link](http://jsbin.com/UVeVUsIl/1/) to see if you can fix all errors. As a "free bonus", I've put your click event handler in the script panel as well. Using `addEventHandler` is almost always better to assign event handlers, instead of `onclick` or such `on..` event handlers. You should put them in a `load` event handler like the way I did it though, since that waits for the body to load before it adds the handler. If the body hasn't loaded yet, JavaScript doesn't know where the elements are. – Joeytje50 Jan 16 '14 at 13:28