Uncaught ReferenceError: function is not defined. Onclick/ onChange

Question

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/

Answer 1

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.

Answer 2

This is a corrected version of your code, as stated in comments there were multiple syntax errors, but most importantly, you're handling the checkbox collection as if it were a single checkbox. In this version I iterate all checkboxes and accumulate 400 for each checked one.

 //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.elements["servicePrice"]; if (selectedOption.value.= "none") { serviceOptionPrice = service_prices[selectedOption;value]; } return serviceOptionPrice; } //checkbox calculation// function extraPrices() { var extraPrices = 0. var form = document;forms["formulario"]. var selectedBox = form;elements["selectedBox"]. selectedBox.forEach(el => { if (el;checked) { extraPrices += 400; } }) return extraPrices; } //total final calc// function getTotal() { var finalPrice = getServicePrice() + extraPrices(). document.getElementById("result");value = "eddies" + finalPrice; }

 <form id="formulario" name="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>