CODEWITHSUNDEEP
javascriptjqueryhtml
Earthy thebear
Earthy thebear

Reputation: 3

Javascript - Function is not defined (onChange doesn't work)

I am calling a function called getPrice() in javascript file by using onChange() command in tag in HTML file, but no matter what I do or fix, it still doesnt show the price. I have done a lot of research but cant seem to find any correct solutions. Helps will be greatly appreciated.

Here is my HTML code: 

    <body>
            <form action="#" name="ITSbookform" id="ITSform">
                    <fieldset>
                    <legend>Into The Storm Booking</legend>
                    <label>Choose your cinema</label><br>
                    <select id="selectedCinema">
                    <option>--Select--</option>
                    <option value="maximaCinema">Maxima Cinema</option> 
                    <option value="rivolaCinema">Rivola Cinema</option> 
                    </select><br>
                    <label>Select day and time</label>

                    <select id="dayAndTime">

                    </select>
                    <br>
                    <label>Select Seat</label>
                    <select id="selectedSeat" onchange="getPrice()">

                    </select>
                    <p id="total">Total Price: </p>


            </form>
    </fieldset>

    </body>

and the Javascipt part: 

    function getPrice(){
    var totalPrice = 0;
    if(document.getElementById("selectedCinema").value == "maximaCinema"){
        if(document.getElementById("dayAndTime").value == "9pmMonday" || document.getElementById("dayAndTime").value == "9pmTuesday"){
            seatPrice["full"] = 12;
            seatPrice["conc"] = 10;
            seatPrice["child"] = 8;
            seatPrice["FirstClass-Adult"] = 25;
            seatPrice["FirstClass-Child"] = 20;
            seatPrice["beanbag"] = 20;
        }
        else{
            seatPrice["full"] = 18;
            seatPrice["conc"] = 15;
            seatPrice["child"] = 12;
            seatPrice["FirstClass-Adult"] = 30;
            seatPrice["FirstClass-Child"] = 25;
            seatPrice["beanbag"] = 30;
        }
    }
    else{
        seatPrice["adult"] = 18;
        seatPrice["conc"] = 15;
        seatPrice["child"] = 12;
    }

    var seat = theForm.elements["selectedSeat"];
    totalPrice = seatPrice[seat.value];
    document.getElementById("total").innerHTML = "$" + totalPrice;
}

and here is the full version of the code in JSFiddle: http://jsfiddle.net/stb0v5Ln/

Thank you.

Upvotes: 0

Views: 15470

Answers (3)

Vitorino fernandes
Vitorino fernandes

Reputation: 15971

Js Fiddle

removed <fieldset> which was not closing proper

and moved the theForm variable inside getPrice() because it was not getting the variable function and fixed

Upvotes: 1

T J
T J

Reputation: 43166

First of all the fiddle is set to run onload - so it'll wrap your code in an onload handler - so the function getPrice() will not be available globally.

Which will cause the error:

Uncaught ReferenceError: getPrice is not defined

Setting the fiddle to no-wrap will fix this issue.

Other than that, JavaScript has function level scope - You've declared the variable var theForm = document.forms["ITSform"]; inside ready() function and you're trying to access it out side in getPrice() function. Which will cause:

Uncaught ReferenceError: theForm is not defined

Either make the variable global or move the function getPrice() inside ready()

Updated Fiddle

Simply checking for errors in browser console will help you solve these kind of issues.

Upvotes: 2

mplungjan
mplungjan

Reputation: 178340

  1. use jQuery consistently, your error is using theForm instead of accessing the form again or accessing the form field by ID
  2. change the fiddle to head instead of onload

FIDDLE

var seat = $("#selectedSeat");
totalPrice = seatPrice[seat.val()];
$("#total").html("$" + totalPrice);

Also remove the onchange from the tag and add

$("#selectedSeat").change(getPrice);

to the ready

ps: remove all head and body tags when creating a fiddle

Upvotes: 2

Related Questions