JavaScript 根据表单选择计算总数

Question

我有一个HTML表单，希望使用JavaScript根据表单选择的值计算总数。

我的代码可以正常工作，但在尝试保存到JS fiddle后，似乎不再计算。是否有什么导致错误的代码？

这是完整代码的链接：

https://jsfiddle.net/kmurray13/gc02Lsmh/

这里只有我的JavaScript代码：

function calculatePrice(){

  //Get selected data  
  var elt = document.getElementById("Quantity");
  var quantity = elt.options[elt.selectedIndex].value;

  var elt = document.getElementById("size");
  var size = elt.options[elt.selectedIndex].value;

  var elt = document.getElementById("page_count");
  var page_count = elt.options[elt.selectedIndex].value;

  var elt = document.getElementById("cover_stock");
  var cover_stock = elt.options[elt.selectedIndex].value;

  var elt = document.getElementById("text_stock");
  var text_stock = elt.options[elt.selectedIndex].value;

  //convert data to integers or decimals
  quantity = parseInt(quantity);
  size = parseFloat(size);
  page_count = parseInt(page_count);
  cover_stock = parseFloat(cover_stock);
  text_stock = parseFloat(text_stock);

 //calculate total value 
 var total = ((cover_stock * quantity)) + ((text_stock * page_count) * quantity); 

  //print value to  PicExtPrice 
  document.getElementById("PicExtPrice").value=total;

}

我的目标是在点击“计算价格”按钮时得到计算结果，但我不确定我所做的代码有什么问题导致出现了这个错误。

- Kasandra Murray

---

引起错误的是什么？哦...在jsfiddle中，默认情况下javascript在onload块中...只需更改为“body底部”- https://jsfiddle.net/2ujw1xqL/ - Jaromanda X

在 jsfiddle 中，默认情况下 JavaScript 位于 onload 块中...只需更改为 "head"。 - Jack jdeoel

可能是Simple Javascript function not working in jsfiddle的重复问题。 - Jack jdeoel

Answer 1

不是你的代码导致了这个问题。这是因为你在onload事件中加载了javascript，因此calculatePrice函数不存在于DOM中，因此你会得到错误。在这里修复：https://jsfiddle.net/fm3g64x0/

最初的回答

- acesmndr

---

正是我的问题。非常感谢。我是JavaScript和JS Fiddle的新手，所以显然是初学者的错误。哈哈 - Kasandra Murray

Answer 2

这是因为 jsFiddle 默认配置将您的 JS 代码包装在 onload 事件处理程序中。如果您查看控制台，会出现 ReferenceError 错误，因为它超出了范围。

在 Javascript jsFiddle 窗格中，单击 JavaScript + No-Library (pure JS) 所在位置，然后选择 No wrap - bottom of 作为 Load Type，重新运行您的代码。

- Julian Hernandez