Javascript - 函數未定義（onChange不起作用）

我在HTML文件的標記中使用onChange（）命令調用javascript文件中的getPrice（）函數，但不管我做了什麼或修復了它，它仍然不顯示價格。我做了很多研究，但似乎找不到任何正確的解決方案。幫助將不勝感激。Javascript - 函數未定義（onChange不起作用）

這裏是我的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/

謝謝。

來源

2014-10-06 Earthy thebear

inval 'fieldset'的id html在'form'後關閉 – 2014-10-06 05:34:44

'select'框中沒有任何選項可用，那麼如何改變事件並調用'getPrice（）'函數呢？ – 2014-10-06 05:38:21

@BhushanKawadkar他正在動態注入它們。 – 2014-10-06 05:47:11

使用jQuery一致，你的錯誤是使用theForm，而不是再次訪問形式或訪問表單字段的ID
變化小提琴頭代替的onload

FIDDLE

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

也從標籤中刪除onchange並添加

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

的準備

PS：創建一個小提琴

來源

2014-10-06 05:43:53 mplungjan

非常感謝你:) – 2014-10-15 07:05:45

首先，小提琴設置爲運行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()

Updated Fiddle

只需在瀏覽器控制檯錯誤檢查可以幫助你解決這些類型的問題。

來源

2014-10-06 05:41:39

非常感謝您的先生 – 2014-10-15 07:03:02

@Earthythebear高興地幫助，順便說一句，你可以叫我的名字... – 2014-10-15 11:23:47

Js Fiddle

去除<fieldset>這是不關閉正確

和移動內部getPrice()的theForm變量時，刪除所有的頭和身體標籤因爲它沒有得到可變的功能並且修正了

來源

2014-10-06 05:53:33

Javascript - 函數未定義（onChange不起作用）

回答

相關問題