Javascript-函数未定义（onChange不起作用）

Question

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. 我正在通过在HTML文件中的标记中使用onChange（）命令在javascript文件中调用一个名为getPrice（）的函数，但是无论我做什么或解决了什么，它仍然不会显示价格。 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: 这是我的HTML代码：

    <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: 和Javascipt部分：

    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/ 这是JSFiddle中代码的完整版本： http : //jsfiddle.net/stb0v5Ln/

Thank you. 谢谢。

Answer 1

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. 首先，将小提琴设置为在onload上运行-这样它将把您的代码包装在onload处理程序中-这样， getPrice()函数将无法全局使用。

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"]; 除此之外，JavaScript还具有功能级别范围-您已声明变量var theForm = document.forms["ITSform"]; inside ready() function and you're trying to access it out side in getPrice() function. 在ready()函数内部，而您试图在getPrice()函数的外部进行访问。 Which will cause: 这将导致：

Uncaught ReferenceError: theForm is not defined

Either make the variable global or move the function getPrice() inside ready() 使变量成为全局变量或将函数getPrice()移入ready()

Updated Fiddle 更新的小提琴

Simply checking for errors in browser console will help you solve these kind of issues. 只需在浏览器控制台中检查错误即可帮助您解决此类问题。

Answer 2

use jQuery consistently, your error is using theForm instead of accessing the form again or accessing the form field by ID 始终使用jQuery，您的错误是使用Form，而不是再次访问表单或按ID访问表单字段
change the fiddle to head instead of onload 将小提琴改为头部而不是onload

FIDDLE 小提琴

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

Also remove the onchange from the tag and add 同时从标签中删除onchange并添加

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

to the ready 准备好了

ps: remove all head and body tags when creating a fiddle ps：创建小提琴时删除所有头部和身体标签

Answer 3

Js Fiddle 提斯

removed <fieldset> which was not closing proper 删除了未正确关闭的<fieldset>

and moved the theForm variable inside getPrice() because it was not getting the variable function and fixed 并将theForm变量移到getPrice()因为它没有获得变量函数并已修复

Javascript-函数未定义（onChange不起作用）

问题描述

3 个解决方案

解决方案1
2 2014-10-06 05:41:39

解决方案2
1 已采纳 2014-10-06 05:43:53

解决方案3
1 2014-10-06 05:53:33

Javascript-函数未定义（onChange不起作用）

问题描述

3 个解决方案

解决方案1 2 2014-10-06 05:41:39

解决方案2 1 已采纳 2014-10-06 05:43:53

解决方案3 1 2014-10-06 05:53:33

解决方案1
2 2014-10-06 05:41:39

解决方案2
1 已采纳 2014-10-06 05:43:53

解决方案3
1 2014-10-06 05:53:33