bourki bourki - 3 years ago 203
Javascript Question

Javascript not returning results from my function

I made a similar post but didn't get my answer or my code working, so I decided to go with a switch function to an if function and this is it!

function taxesrepas(option){
var soustot;
var taxes;
var total;
var soustot;

if (option = getelementbyid("spaghetti"))
total += 9.62;
taxes += 0.67;
soustot +=8.95;

if (option = getelementbyid("lasagne"))
total += 10.70;
taxes += 0.75;
soustot += 9.95;

if (option = getelementbyid("salade"))
total += 6.30;
taxes += 0.45;
soustot += 5.95;
if (option =getelementbyid("escargot"))
total += 5.32;
taxes += 0.37;
soustot += 4.95;

document.getElementById("taxes").innerHTML = taxes;
document.getElementbyid("total").innerHTML = total;
document.getElementbyid("soustot").innerHTML = soustot;
}


The function is to return the price of taxes and the totals, from a select menu.
This is where I want my results to be printed but they just don't print, I've tried with the switch now with if I'm literally going crazy.

<h3 id="choix"></h3>
<h3 id="taxes" onclick= "taxesrepas(this.value)">taxes:</h3>
<h3 id="soustotal" onclick= "taxesrepas(this.value)">Sous-total:</h3>
<h3 id="total"onclick= "taxesrepas(this.value)">Total:</h3>

Answer Source

You have a lot of syntax errors in your code. I suggest you browse the web for basic tutorials.

  1. You are not initializing your variables:
var taxes;
var total;
var soustot;

calling total += 9.62 is an error because undefined plus a number is NaN

  1. You are using = assignment instead of == comparison in you if conditions

should be if(somevariable == somevalue) not if(somevariable = somevalue)

  1. You are not enclosing your if statements with curly braces {}
if(somevariable == somevalue)
   dosomething1(); // your if statement only includes up to this part
   dosomething2(); // this line does not belong to the if statement

you should:

if(somevariable == somevalue) { //opening here
   dosomething1();
   dosomething2();
} //closing here
  1. What the heck is getelementbyid("spaghetti"). Where have you defined a function named getelementbyid?

  2. It's document.getElementById not document.getElementByid (you have used small i)

  3. You are treating your <h3> elements like buttons when you wanted those elements to change when you have selected an option, correct?

    • you are adding onclick attribute. This should be onClick
    • you are passing this.value to your function. You should do this.innerHTML instead

HOWEVER, I strongly discourage you to do something like that.

if you want to add listeners to specific elements, do it in JavaScript. Yes, adding onClick inline events are valid, but it requires you to put JS behaviours to your HTML. One more reason is that writing events in your JS makes it a lot maintainable.

You can try:

document.getElementById('total').onClick = somefunction

Anyway, here's the least I could come up with.

supposedly you have a <select> that contains your options and then when selecting an option, you see the price. (then spaghetti spurts in your nose).

var select = document.getElementById('optioncombo');

select.addEventListener('change', function() {
  taxesrepas(select.value);
});

function taxesrepas(option) {
  //you need to assign a starting value for your variables or you will get NaN when using +=
  var soustot = 0,
    taxes = 0,
    total = 0,
    soustot = 0;

  //getelementbyid is not a function!!!
  //if (option == getelementbyid("spaghetti")) {
  if (option == "spaghetti") {
    total += 9.62;
    taxes += 0.67;
    soustot += 8.95;
  }
  if (option == "lasagne") {
    total += 10.70;
    taxes += 0.75;
    soustot += 9.95;
  }

  if (option == "salade") {
    total += 6.30;
    taxes += 0.45;
    soustot += 5.95;
  }
  if (option == "escargot") {
    total += 5.32;
    taxes += 0.37;
    soustot += 4.95;
  }

  document.getElementById("choix").innerHTML = option;
  document.getElementById("taxes").innerHTML = taxes;
  document.getElementById("total").innerHTML = total;
  document.getElementById("soustotal").innerHTML = soustot;

}
<label for="optioncombo">Product: </label><select id="optioncombo">
  <option value="none"></option>
  <option value="spaghetti">spaghetti</option>
  <option value="lasagne">lasagne</option>
  <option value="salade">salade</option>
  <option value="escargot">escargot</option>
</select>

<h3>Your choice is:</h3><span id="choix"></span>
<h3>taxes:</h3><span id="taxes"></span>
<h3>Sous-total:</h3><span id="soustotal"></span>
<h3>Total:</h3><span id="total"></span>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download