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

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

本文关键字：不起作用 onChange 函数 未定义 Javascript-      更新时间：2023-09-26

我在javascript文件中使用HTML文件中标记中的onChange（）命令调用一个名为getPrice（）的函数，但无论我做了什么或修复了什么，它仍然没有显示价格。我做了很多研究，但似乎找不到任何正确的解决方案。我们将非常感谢您的帮助。

这是我的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>

以及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;
}

以下是JSFiddle中代码的完整版本：http://jsfiddle.net/stb0v5Ln/

谢谢。

  1. 始终使用jQuery，您的错误是使用form，而不是再次访问窗体或按ID访问窗体字段
  2. 将小提琴改为头，而不是加载

小提琴

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

同时从标签中删除onchange并添加

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

到准备好的

ps：创建fiddle 时删除所有头部和身体标签

首先，fiddle被设置为运行onload，因此它将把代码包装在一个onload处理程序中，因此函数getPrice()在全局范围内不可用。

这将导致错误：

Uncaught ReferenceError: getPrice is not defined

将小提琴设置为无包装将解决此问题。

除此之外，JavaScript还有函数级作用域——您已经在ready()函数中声明了变量var theForm = document.forms["ITSform"];，并试图在getPrice()函数中访问它。这将导致：

Uncaught ReferenceError: theForm is not defined

将变量设为全局变量或将函数getPrice()移动到ready() 中

更新的Fiddle

只需在浏览器控制台中检查错误即可帮助您解决此类问题。

Js Fiddle

删除了未关闭正确的<fieldset>

并将CCD_ 9变量移动到CCD_

相关文章：