Javascript - 函数未定义（onChange 不起作用）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26210481/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript - Function is not defined (onChange doesn't work)
提问by Earthy thebear
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.
我通过在 HTML 文件中的标记中使用 onChange() 命令在 javascript 文件中调用名为 getPrice() 的函数，但无论我做什么或修复什么，它仍然不显示价格。我做了很多研究，但似乎找不到任何正确的解决方案。帮助将不胜感激。
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.
谢谢你。
回答by T J
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.
首先，fiddle 设置为运行onload- 因此它会将您的代码包装在一个 onload 处理程序中 - 因此该函数getPrice()将无法全局使用。
Which will cause the error:
这将导致错误：
Uncaught ReferenceError: getPrice is not defined
Setting the fiddle to no-wrap will fix this issue.
将小提琴设置为 no-wrap 将解决此问题。
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:
除此之外，JavaScript 具有函数级作用域——您已经var theForm = document.forms["ITSform"];在ready()函数内部声明了变量，并试图在getPrice()函数外部访问它。这将导致：
Uncaught ReferenceError: theForm is not defined
Either make the variable global or move the function getPrice()inside ready()
要么使变量成为全局变量，要么将函数移动到getPrice()内部ready()
Simply checking for errors in browser console will help you solve these kind of issues.
只需检查浏览器控制台中的错误即可帮助您解决此类问题。
回答by mplungjan
- use jQuery consistently, your error is using theForm instead of accessing the form again or accessing the form field by ID
- change the fiddle to head instead of onload
- 始终使用 jQuery，您的错误是使用 theForm 而不是再次访问表单或通过 ID 访问表单字段
- 将小提琴更改为头部而不是加载
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：创建小提琴时删除所有头部和身体标签
