document.getElementById_问答_开发者_运维开发者技术经验分享

I'm working on an assignment in my beginner Javascript class that involves an element document.getElementById on the first line below the var total. There is an error of missing ";" but the semicolon is there. So I know that it must be something else. Here is the code. Any suggestions?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Price Calculator</title>
<script type="text/javascript">
function fixOrder(){
const TAX = 0.975;
var numPrice = parseFloat(document.getElementById("cost").value);


var subtotal = numPrice * TAX;
var total = subtotal + tax;
document.getElementById("cost").value = "$" cost.ToFixed(2);
document.getElementById("tax").value ="$" tax.ToFixed(2);
document.getElementById("total").value ="$" total.ToFixed(2);
}

function placeOrder(){
if (document.getElementById("cost") == ""
isNaN(document.getElementById("cost")
alert("Sorry,you must enter a numeric value to place order")
if (document.getElementById("tax") == ""
isNaN(document.getElementById("tax")
alert("Sorry, you must enter a numeric value to place the order");
}
</script>

</head>

<body bgcolor="#00f3F1">
<frame align="left">
<legend>
<h1 align="center">Price Calculator</h1>
</legend>
<form name="purchases" action="donut.php"  method="POST">

Price:<p> <input type="text" id="cost" name="cost" value="" onchange="fixOrder">
</p>
Tax:<p>  <input type="text" id="tax" name="tax" value="" onchange="fixOrder">
</p>
Total:<p> <开发者_运维问答;input type="text" id="total" name="total" value="" >
</p>
</form>
</frame>



<div id="cost" name="cost" value="" onchange="placeOrder();"></div>
</body>
</html>

In javascript, you concatenate strings with the + operator. Instead of

document.getElementById("cost").value = "$" cost.ToFixed(2);

Use

document.getElementById("cost").value = "$" + cost.ToFixed(2);

Your if statements are also wrong. Instead of

if (document.getElementById("cost") == ""
isNaN(document.getElementById("cost")
alert("Sorry,you must enter a numeric value to place order")

Use

if(isNaN(document.getElementById("cost").value))
    alert("Sorry,you must enter a numeric value to place order");

You're missing + between "$" and the xxx.ToFixed(2)s. What's more, it's toFixed, not ToFixed. You're also missing closing parenthesis everywhere (if statements and isNaN calls) as well as a || between the two.

You need to use a concatenation operator here (notice the +):

document.getElementById("cost").value = "$" + cost.ToFixed(2);

You also have syntax errors in your if statement. They should be:

if (document.getElementById("cost") == "" || isNaN(document.getElementById("cost")) {
   ...
}

and

if (document.getElementById("tax") == "" || isNaN(document.getElementById("tax")) {
   ...
}

Also, please consider indenting your code. It makes it much easier to read and maintain and will help you spot your syntax errors much more easily as well.

There are a few other errors (not syntax), but I will let you figure those out; this is homework after all.

EDIT: It looks like you're a real beginner, so in addition to what you're learning in class, I'd pick up some books that are tailored for beginners. Here are some that I was able to find.

As has already been pointed out by the numerous other answers, there are a multitude of problems with your code. This answer is intended to address all of the mistakes and shortcomings.

I'll go from the top of the posted code. Firstly, you may have simply not pasted it into the question, but you're missing a DOCTYPE declaration at the top of the file. All HTML documents should begin with a DOCTYPE, for example:

<!DOCTYPE html>

Into the JavaScript, the const keyword, while valid, is not supported by a lot of older browsers and is definitely best avoided. Replace it with var, it will make no difference.

To concatenate strings in JavaScript you use the + operator:

document.getElementById("cost").value = "$" + cost.toFixed(2);

Also notice that I've changed ToFixed to toFixed. Another problem with the above line is the variable cost, which you've not defined. You may have meant numPrice, but I'm not entirely sure!

On the next line, you're using tax instead of TAX. Variable names in JavaScript are case-sensitive, so tax is also undefined.

Your if statement conditions are wrong. I'm assuming you meant this:

if(document.getElementById("cost").value == "" || isNaN(document.getElementById("cost").value)

There's a few changes to that line. Firstly, you were comparing a DOM element itself (getElementById returns a DOM element), rather than the value of it. Secondly, you were missing the closing parentheses, and finally, you needed some operator between the two conditions. I think you were after the "or" operator, ||. There's a similar issue with your second if statement.

You're missing a semi-colon off the end of your first alert line. While that's still valid, it's definitely good practice to always include the semi-colon.

Back into the HTML, you're trying to call the fixOrder JS function, but you've missed the parentheses:

<input type="text" id="cost" name="cost" value="" onchange="fixOrder()">

To be really picky, you shouldn't really use inline event handlers, but I won't go into that here.

I'm not sure why you're using a frame element the way you are, but I have a feeling it would be better replaced by a div, or simply nothing at all (again, I may not have the full picture if you haven't posted the full code).

On your body tag you're using the bgcolor attribute. That should definitely be replaced by CSS. You can use the background-color property.

A few things here:

you should optimize the code by setting variables for your document.getElementById("cost"). So var c = document.getElementById("cost");
your if statements are missing closing parentheses and or operators.

if (document.getElementById("cost") == "" isNaN(document.getElementById("cost")

should be

if (document.getElementById("cost") == "" || 
isNaN(document.getElementById("cost"))

You are also missing a ; after your alert here

if (document.getElementById("cost") == ""
isNaN(document.getElementById("cost")
alert("Sorry,you must enter a numeric value to place order")

That code was a total mess. I've fixed it up. It should work now:

function fixOrder()
{
    const TAX = new Number(0.975);

    var numPrice = parseFloat(document.getElementById("cost").value);
    var cost = new Number(document.getElementById("cost").value);
    var total = new Number(document.getElementById("total").value);

    var subtotal = numPrice * TAX;
    var total = new Number(subtotal + TAX);

    document.getElementById("cost").value = "$" + cost.toFixed(2);
    document.getElementById("tax").value ="$" + TAX.toFixed(2);
    document.getElementById("total").value ="$" + total.toFixed(2);
}

function placeOrder()
{
    if (document.getElementById("cost").value == "" || isNaN(document.getElementById("cost").value)) {
        alert("Sorry,you must enter a numeric value to place order");
    }

    if (document.getElementById("tax").value == "" || isNaN(document.getElementById("tax").value)) {
        alert("Sorry, you must enter a numeric value to place the order");
    }
}

There are couple of errors going on here, first, you need to concatenate the string "$" with cost.ToFixed(2); using the concatenation operator +, apply this for the next 2 lines.

Other errors are in the if conditions, you are missing the closing ) in both if conditions, also, I guess that you want to check that the value of the text box is empty so you need to add .value.

here is the working source

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Price Calculator</title>
<script type="text/javascript">
function fixOrder(){
const TAX = 0.975;
var numPrice = parseFloat(document.getElementById("cost").value);


var subtotal = numPrice * TAX;
var total = subtotal + tax;
document.getElementById("cost").value = "$" +cost.ToFixed(2);
document.getElementById("tax").value ="$" +tax.ToFixed(2);
document.getElementById("total").value ="$" +total.ToFixed(2);
}

function placeOrder(){
if (document.getElementById("cost").value == "" ||     isNaN(document.getElementById("cost").value))
alert("Sorry,you must enter a numeric value to place order");
if (document.getElementById("tax").value == "" ||     isNaN(document.getElementById("tax").value))
alert("Sorry, you must enter a numeric value to place the order");
}
</script>

</head>

<body bgcolor="#00f3F1">
<frame align="left">
<legend>
<h1 align="center">Price Calculator</h1>
</legend>
<form name="purchases" action="donut.php"  method="POST">

Price:<p> <input type="text" id="cost" name="cost" value="" onchange="fixOrder">
</p>
Tax:<p>  <input type="text" id="tax" name="tax" value="" onchange="fixOrder">
</p>
Total:<p> <input type="text" id="total" name="total" value="" >
</p>
</form>
</frame>



<div id="cost" name="cost" value="" onchange="placeOrder();"></div>
</body>
</html>

<p>if ($(this).attr('name') == 'time') {
    var value = $(this).val();
    parseFloat(value).toFixed(2);
    alert(value);
    editEntry.time = value;
}
</p>