Javascripts calculates total based on form selections

Question

I have an html form that I want to use javascript to calculate the total based on values of the form selection.

I was able to get my code work, but after trying to save it to JS fiddle it doesn't seem to be calculating anymore. Is there something in my code that is causing the error?

Here is the link to my full code:

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

Here is just my 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;

}

My goal is to get the calculation when you click the 'Calculate Price' button, but I am not sure what I have done to the code to cause this error.

Answer 1

No it's not anything in your code that's causing the issue. It's because you were loading the javascript in the onload event thus the calculatePrice function wasn't present in the DOM thus you were getting the error. Fixed here: https://jsfiddle.net/fm3g64x0/