Question

188

document.getElementById

rated 0 times [ 192] [ 4] / answers: 1 / hits: 27398 / 13 Years ago, sat, october 8, 2011, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dominics

Add To Favorites

Follow

Total Points: 424

Total Questions: 99

Total Answers: 107

Location: South Korea

Member since Fri, Sep 11, 2020

4 Years ago

dominics questions

1 react setState() not triggering re-render

Wed, Apr 6, 22, 00:00, 2 Years ago

1 export a variable inside a function to be used in other modules

Mon, Feb 7, 22, 00:00, 2 Years ago

1 how to make TextInput with dropdown/picker in react-native?

Thu, Jan 13, 22, 00:00, 2 Years ago

1 How to remove extra empty space and scroll bar at the bottom of my html page?

Wed, Jan 20, 21, 00:00, 3 Years ago

1 AgGrid: applyColumnState is not a function

Fri, Sep 18, 20, 00:00, 4 Years ago

View All

answered 13 Years ago noe · Accepted Answer

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.