Skip to content
Advertisement

Uncaught ReferenceError: function is not defined. Onclick/ onChange

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.

User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement