JS code not working.

Hi,
Could you please tell me where exactly I have made mistakes as the following JS code is not working.

<html><head><title>Duncan's Donuts</title>

{

if	( document.getElementById("Name").value == "" )

alert("Invalid entry.");

else if isNan(document.getElementById("minutesPickup").value)

alert("Wrong data.");
	}

function parseDonuts(dozenString)

{

var numDonuts = parseInt(dozenString);

if(dozenString.indexOf("dozen") != -1)

numDonuts *= 12;

return numDonuts;
	}

function calculatePrice(){

const taxRate = .10;	const donutPrice = 10;
		var cake = parseDonuts(document.getElementById("cakeDonutsNo").value);

if isNaN(cake)

cake = 0;

var glazed = parseDonuts(document.getElementById("glazedDonutsNo").value );

if isNaN(glazed)

glazed = 0;

var subTotal = parseInt(cake)+ parseInt(glazed) ;

subTotal = subTotal* donutPrice;

var tax = taxRate * subTotal;

var total = subTotal+tax;

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

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

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

}
</script>
</head>

<b>Duncan's Just-In-Time Donuts</b>

<br>

Name:                           <input type="text" id="Name" onblur="validateTextField()" tabindex="1";/>

<br/>

#of cake donuts:                <input type="text" id="cakeDonutsNo" value=""  onchange="calculatePrice()";/>

<br/>

#of glazed donuts:              <input type="text" id="glazedDonutsNo" value=""  onchange="calculatePrice()";/>

<br/>

Minutes 'till pickup :          <input type="text" id="minutesPickup" onblur ="validateTextField()" ; />

<br/>

Subtotal:                       <input type="text" id="subTotal1"  readonly="readonly" />

<br/>

Tax:                            <input type="text" id="Tax"   readonly="readonly" />

<br/>

Total:                          <input type="text" id="Total"  readonly="readonly" />

<br/>

</div></form></body></html>

Without giving us any idea where the problem is happening? Or even what the problem is? Please put a little more effort into your post.

Hi Bear,

The code looks good to me, but neither the alert message nor the calculation part takes place if I run it.
Don't know what exactly went wrong.

Apologies for the inconvenience.

I'm not an expert in this. Try by putting the semicolon inside the double quotes instead of it being outside like you have mentioned in your post onchange="calculatePrice()";

Nope Joe.
No change.

Your code contains numerous errors. I've spotted only two of them but I'm sure that there are more. For example, the following code

should be

Also, the following code

should be

Like Bear Bibeault said please put a little more effort into your post.

If you use Firefox, then the Error Console (to be found in the Tools menu) will be very valuable for tracking down JavaScript bugs.

Hello,

I've corrected the code and it works fine now.

The only problem I'm facing right now is that if I leave "Name" or "minutesPickup" field empty or invalid, I do get Alert box but then the pointer moves to the next field.
I need to show the pointer in the same field after clicking OK on my Alert box.
I tried changing "onblur" to "onchange" for "Name" field but it didn't work.

Below is the code :

<html><head><title>Duncan's Donuts</title>  
  
<script type="text/javascript">  
       function validateTextField() {  
        if  ( document.getElementById("Name").value == "" )  
            alert("Name can not be blank.");  
		else if ( !isNaN(document.getElementById("Name").value) ) 
			alert("Name can not be a number.");  	
        
    }  
	
		function validateNumberField() {
		 if ((isNaN(document.getElementById("minutesPickup").value)) || (document.getElementById("minutesPickup").value == ""))
            alert("minutesPickup entry is invalid..");  
	}	
  
    function parseDonuts(dozenString)  {  
        var numDonuts = parseInt(dozenString);  
        if(dozenString.indexOf("dozen") != -1)  
        numDonuts *= 12;  
        return numDonuts;  
    }  
  
    function calculatePrice() {  
        const taxRate = .10;    const donutPrice = 10;  
        var cake = parseDonuts(document.getElementById("cakeDonutsNo").value);  
        var glazed = parseDonuts(document.getElementById("glazedDonutsNo").value );  
        if (isNaN(cake))  cake = 0; 
		if (isNaN(glazed))   glazed = 0;  
  
        var subTotal = parseInt(cake)+ parseInt(glazed) ;  
        var subTotal1 = subTotal* donutPrice;  
        var tax = taxRate * subTotal1;   
        var total = subTotal1+tax;   
  
        document.getElementById("subTotal1").value = "$" +subTotal1.toFixed(2) ;  
        document.getElementById("Total").value = "$" +total.toFixed(2);  
        document.getElementById("Tax").value = "$" +tax.toFixed(2);       
    }  
</script>  
</head>  
  
<body> <form> 
 <div>
	<b>Duncan's Just-In-Time Donuts</b>    <br/> 
		Name : <input type="text" id="Name" value="" onblur="validateTextField()" tabindex="1";/>     <br/>  
		#of cake donuts:                <input type="text" id="cakeDonutsNo" name="cakeDonutsNo" value=""  onchange="calculatePrice()" tabindex="2";/>  <br/> 
		#of glazed donuts:              <input type="text" id="glazedDonutsNo" value="" name="glazedDonutsNo" onchange="calculatePrice()" tabindex="3";/>  <br/> 
		Minutes 'till pickup :          <input type="text" id="minutesPickup" onblur="validateNumberField()" tabindex="4";/>   <br/> 
		Subtotal:                       <input type="text" id="subTotal1"  readonly="readonly" />  <br/> 
		Tax:                            <input type="text" id="Tax"   readonly="readonly" />  <br/> 
		Total:                          <input type="text" id="Total"  readonly="readonly" />  <br/> 
      
    <input type="Submit" value="Place Order" id="submitButton"/>  
 </div> </form>
</body></html>

replace this code

with this

Thanks Ogeh Ikem

I tried out with both Name.focus() &document.getElementById("Name").focus();
Both ways, it works fine.

You're welcome.