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.