Javascript Reference Error - Can not find entire function

Question

I am trying to write a simple javascript function to calculate the totals based on data printed out by php and it is giving me a Javascript Reference error which I have Googled, but the error is too simplistic and common for me to find any information specific to my problem.

I have clearly made the functions and I can not understand what I have done wrong. I know it probably just a formatting error but I can not see it.

The JSFiddle is here (it has static examples of what the php would print): JSFiddle Example

And my javascript:

function calculcateTotal(obj){
    var id = obj;

    var ticketCost = document.getElementById(obj).value;

    var i = 1;
    boolean firstTicket = true;

    if(document.getElementById('term1').selected == true){
        if(firstTicket == false){
            i = i + 1;
        }else if(firstTicket == true){
            firstTicket = false;
        }
    }else if(document.getElementById('term2').selected == true){
        if(firstTicket == false){
            i = i + 1;
        }else if(firstTicket == true){
            firstTicket = false;
        }
    }else if(document.getElementById('term3').selected == true){
        if(firstTicket == false){
            i = i + 1;
        }else if(firstTicket == true){
            firstTicket = false;
        }
    }else if(document.getElementById('term4').selected == true){
        if(firstTicket == false){
            i = i + 1;
        }else if(firstTicket == true){
            firstTicket = false;
        }
    }

    var runningTotal = parseFloat(ticketCost)*parseFloat(i);

    document.getElementById('total').value = runningTotal;

  }

  function changeTotal(){

    var ticketCost = document.getElementById('total').value;

    var i = 1;
    boolean firstTicket = true;

    if(document.getElementById('term1').selected == true){
        if(firstTicket == false){
            i = i + 1;
        }else if(firstTicket == true){
            firstTicket = false;
        }
    }else if(document.getElementById('term2').selected == true){
        if(firstTicket == false){
            i = i + 1;
        }else if(firstTicket == true){
            firstTicket = false;
        }
    }else if(document.getElementById('term3').selected == true){
        if(firstTicket == false){
            i = i + 1;
        }else if(firstTicket == true){
            firstTicket = false;
        }
    }else if(document.getElementById('term4').selected == true){
        if(firstTicket == false){
            i = i + 1;
        }else if(firstTicket == true){
            firstTicket = false;
        }
    }

    var runningTotal = parseFloat(ticketCost)*parseFloat(i);

    document.getElementById('total').value = runningTotal;

  }

Can anyone see what my issue is?

Ta!

You're 100% sure the PHP data is coming through properly? Side note: why'd you make an id variable if you were still just going to use obj directly in ticketCost? And obj is never a number, right? If it is, that will not work. — Rhyono
– Rhyono, Commented Oct 29, 2013 at 2:27
Also, not that it matters much but calculcateTotal should probably be calculateTotal. Both match in js and html so it will work but I doubt this was deliberate — Kai Qing
– Kai Qing, Commented Oct 29, 2013 at 2:31
Just a few tips: i = i +1 can be done as i++ or as i += 1. If something is true/false, you can do if(firstTicket) and it'll assume it's checking against true or if(!firstTicket) to check against false. Also, if an if/else if only contains a single line, you don't have to use the {}. — Rhyono
– Rhyono, Commented Oct 29, 2013 at 2:31
Also when you call calculateTotal(this) from the select, the variable this refers to the select block. When you say document.getElementById(obj).value; (where obj is the this you just passed in) you are trying to check the value of a null object. document.getElementById() accepts an ID (as a string) as an argument, not a DOM object. — Cam
– Cam, Commented Oct 29, 2013 at 2:37
As you guys can probably tell I am primarily a php developer so picking up javascript is a pain. Thanks for all your help and tips I really appreciate it! — David Dawson
– David Dawson, Commented Oct 29, 2013 at 2:42

user1864610 · Accepted Answer · 2013-10-29 02:27:28Z

3

Two lines like this:

    boolean firstTicket = true;

boolean is not a vlaid keyword in Javascript - use var instead.

If there's a syntax error in your Javascript the whole function is discarded, hence the reference errors.

answered Oct 29, 2013 at 2:27

user1864610

Sign up to request clarification or add additional context in comments.

3 Comments

David Dawson Over a year ago

thanks mate, it doesn't solve my entire issue as the function still does not work but it gets me past this error message so I can move on to the next one.

user1864610 Over a year ago

@JayHarris Maybe not, but the code is clearly incomplete. The changeTotal() function doesn't actually calculate very much. It takes the value from the total (starting at 0), adds up the number of check boxes and multiplies that total by the starting total to give...zero, which it puts back in the field.

Jay Harris Over a year ago

@DavidDawson i have your solution below, under edit.

Jay Harris · Accepted Answer · 2013-10-29 03:47:53Z

You have multiple errors in your script, it took me a while but i figured your script. outside of the obvious syntax errors it was essential one line of code that was causing the problem.

Updated your Fiddle

// This is the line
// ticketCost = document.getElementById(obj).value;

// change to this
ticketCost = document.getElementById(obj.value).value;

The variable obj is an html element, so therefore this will throw error putting it directly into the method, what you wanted to do is get the id of the of it, which is the value of the selected item.

Syntax:

 // Syntax Error
 // boolean firstTicket = true;
 // correction
 var i = 1,     
     firstTicket = true;

// Syntax
// its checked not selected
// document.getElementById('term2').selected
document.getElementById('term2').checked

// Possible rewrite
 if (!firstTicket) i++;
 else firstTicket = false;

// from 
// no need for the extra if statement 
// bc false and true are opposites
if (firstTicket == false) {
  i = i + 1;
} else if (firstTicket == true) {
  firstTicket = false;
}

// Catch errors with first option being selected
if (obj.value === '') return false;

// reference error is due to the script not being in the head
// either put the script in the head or before the first call from the html elements
// use no wrap - in <head> for jsfiddle console

Other than that you were close. but you can use console.log to discover errors and variable values with the javascript console to help you with debugging

EDIT:
Your code is over kill, i minimized it for you so it'll actually work. JSFIDDLE

 var i = 0, // ticket count
     ticketCost = 0, // ticket cost
     total = document.getElementById('total');  // total

 function calculcateTotal (obj) {
  // change the ticket cost here    
    ticketCost = obj.value === '' ? 0 : document.getElementById(obj.value).value;       
    total.value = parseFloat(ticketCost) * i;       
 }

 function changeTotal (obj) {
    // change the ticket size here
    i = obj.checked ? (i + 1) : (i - 1);
    total.value = ticketCost * i;   
 }

HTML

 // change html to the following
 // onchange="changeTotal(this)"
 <input type="checkbox" name="term1" id="term1" value="Summer" style="width:auto;margin-right:5px;" onchange="changeTotal(this)">

Collectives™ on Stack Overflow

Javascript Reference Error - Can not find entire function

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related