TL;DR getTotal should give me a total of these 2 functions summed together but it’s throwing me an error instead:
Uncaught ReferenceError: getTotal is not defined onchange http://127.0.0.1:3211/XyZPage/Untitled-1.html:1 Uncaught ReferenceError: getTotal is not defined onclick http://127.0.0.1:3211/XyZPage/Untitled-1.html:1 code:
var service_prices= new Array(); service_prices=["0"]= 0; service_prices=["1500"]= 1500; service_prices=["4000"]= 4000; service_prices=["8000"]= 8000; function getServicePrice(){ var serviceOptionPrice=0; var form = document.forms["formulario"]; var selectedOption = form.elements["servicePrice"]; serviceOptionPrice = service_prices[selectedOption.value]; return serviceOptionPrice; } //checkbox calculation// function extraPrices(){ var extraPrices=0; var form=document.forms["formulario"]; var selectedBox = form.elements["selectedBox"]; if(selectedBox.checked==true){ extraPrices=400; } return extraPrices; } //total final calc// function getTotal(){ var finalPrice = getServicePrice() + extraPrices(); document.getElementById("result").innerHTML= "eddies" + finalPrice; }
I’ve tried couple fixes from threads here but nothing worked so far. JS alongside html https://jsfiddle.net/j1t68npf/
Advertisement
Answer
You have a several syntax errors in your JS which prevent the parser from reaching the getTotal()
definition. So it remains undefined.
The offending sections is:
service_prices=["0"]= 0; service_prices=["1500"]= 1500; service_prices=["4000"]= 4000; service_prices=["8000"]= 8000;
If you repair this you will no longer get the undefined error.
After this is fixed there are several other coding errors which, when resolved will get you this:
//reference the form by it's ID// //Dropdown list calculation// var service_prices = new Array(); service_prices["0"] = 0; service_prices["1500"] = 1500; service_prices["4000"] = 4000; service_prices["8000"] = 8000; function getServicePrice() { var serviceOptionPrice = 0; var form = document.forms["formulario"]; var selectedOption = form.querySelector("#servicePrice"); if (service_prices[selectedOption.value]) { serviceOptionPrice = service_prices[selectedOption.value]; } return serviceOptionPrice; } //checkbox calculation// function extraPrices() { var extraPrices = 0; var form = document.forms["formulario"]; var selectedBoxes = form.querySelectorAll("#selectedBox"); selectedBoxes.forEach(box => { if (box.checked == true) { extraPrices += 400; } }) return extraPrices; } //total final calc// function getTotal() { var finalPrice = getServicePrice() + extraPrices(); document.getElementById("result").value = "eddies" + finalPrice; }
<form id="formulario"> <p> Type of Service</p> <select name="serviço" id="servicePrice" onchange="getTotal()"> <option value="none">Select a service</option> <option value="1500">1500€</option> <option value="4000">4000€</option> <option value="8000">8000€</option> </select> <!--checkbox--> <h1>DESIRED EXTRAS</h1> <br> <input type="checkbox" name="selectedBox" value="4" id="selectedBox" onclick="getTotal()"> Who we are <input type="checkbox" name="selectedBox" value="5" id="selectedBox" onclick="getTotal()"> Where we are <br> <input type="checkbox" name="selectedBox" value="6" id="selectedBox" onclick="getTotal()"> Gun Gallery <input type="checkbox" name="selectedBox" value="7" id="selectedBox" onclick="getTotal()"> eCommerce <br> <input type="checkbox" name="selectedBox" value="8" id="selectedBox" onclick="getTotal()"> Internal Mangement <input type="checkbox" name="selectedBox" value="9" id="selectedBox" onclick="getTotal()"> News <br> <input type="checkbox" name="selectedBox"> Social Network <br> <br> <br> <!--result--> <h1>Estimated Total</h1> <input type="text" class="InStyle" disabled id="result"> </form>
It bears mentioning that you should not re-use ID values in html, they are supposed to be unique.