Question

我通过在HTML文件中的标记中使用onChange（）命令在javascript文件中调用一个名为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/

谢谢。

Answer 1

首先，小提琴设置为运行onload - 因此它会将您的代码包装在onload处理程序中 - 因此函数getPrice()将无法全局使用。

这将导致错误：

Uncaught ReferenceError: getPrice is not defined

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

除此之外，JavaScript具有功能级别范围 - 您已在var theForm = document.forms["ITSform"];函数内声明了变量ready()，并且您正试图在getPrice()函数中将其访问出来。这将导致：

Uncaught ReferenceError: theForm is not defined

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

中

Updated Fiddle

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

Answer 2

一致地使用jQuery，您的错误是使用theForm而不是再次访问表单或通过ID访问表单字段
将小提琴改为头部而不是onload

FIDDLE

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

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

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

准备好了

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

Answer 3

Js Fiddle

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

并将theForm变量移到getPrice()内，因为它没有获得变量函数并已修复

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

3 个答案: