Forum:

HTML Pages with CSS and JavaScript

JS code not working.

pramod talekar

Ranch Hand

Posts: 367

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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>

Thanks,
Pramod

Bear Bibeault

Sheriff

Posts: 67699

173

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

pramod talekar

Ranch Hand

Posts: 367

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

Thanks,
Pramod

Joe San

Ranch Hand

Posts: 10198

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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()";

SCJP 1.4, SCWCD 1.4 - Hints for you, Certified Scrum Master
Did a rm -R / to find out that I lost my entire Linux installation!

pramod talekar

Ranch Hand

Posts: 367

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Nope Joe.
No change.

Thanks,
Pramod

Ogeh Ikem

Ranch Hand

Posts: 180

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

Ulf Dittmer

Rancher

Posts: 43075

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

pramod talekar

Ranch Hand

Posts: 367

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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>

Thanks,
Pramod

Ogeh Ikem

Ranch Hand

Posts: 180

posted 11 years ago