javascript - Number assigned to a variable using Case Switch returning 0 instead of correct result -

i beginner in javascript , simulate exercise using html , javascript. basically, have 2 inputs take 1: name of product , 2) quantity of item. when user click on button, function calculates total amount item executed. on function, use switch statement in order calculate right $amount according product. function should print itemtotal result of itemq (quantity of item) * fix value item (3.5 eggs). itemtotal appear 0 zero. seems switch statement not recognize it. if make local value inside switch, cannot used outside of switch statement. can do? ideas?

function caltotitema() {    var item = document.getelementbyid("itemname").value;    var itemq = document.getelementbyid("itemquantity").value;    var itemtotal = 0;    switch (item) {      case "eggs":        this.itemtotal = 3.5 * itemq;        break;      case "milk":        this.itemtotal = 4.5 * itemq;        break;    }    document.getelementbyid("itemtotaldisplay").innerhtml = itemtotal;  }

header {    background-color: #83bd26;  }  h1 {    text-align: center;  }  #pad {    background-color: #b5bfa4;  }  #container {    border: 3px solid black;  }  #itembox {    height: 3px;    widht:  }

<div id="container">    <header>      <h1>my cash register</h1>    </header>    <div id="pad">      <form>enter item        <input type="text" id="itemname" value=" ">      </form>      <form>enter quantity of item        <input type="number" id="itemquantity" value="0">      </form>      <button onclick="caltotitema()">calculate total amount per item</button>      <p>the total amount item:</p>      <p id="itemtotaldisplay"></p>    </div>  </div>

function caltotitema() {    var item = document.getelementbyid("itemname").value;    var itemq = document.getelementbyid("itemquantity").value;    var itemtotal = 0;    switch (item) {      case "eggs":        itemtotal = 3.5 * itemq;        break;      case "milk":        itemtotal = 4.5 * itemq;        break;    }    document.getelementbyid("itemtotaldisplay").innerhtml = itemtotal;  }

header {    background-color: #83bd26;  }  h1 {    text-align: center;  }  #pad {    background-color: #b5bfa4;  }  #container {    border: 3px solid black;  }  #itembox {    height: 3px;    widht:  }

<div id="container">    <header>      <h1>my cash register</h1>    </header>    <div id="pad">      <form>enter item        <input type="text" id="itemname" value="">      </form>      <form>enter quantity of item        <input type="number" id="itemquantity" value="0">      </form>      <button onclick="caltotitema()">calculate total amount per item</button>      <p>the total amount item:</p>      <p id="itemtotaldisplay"></p>    </div>  </div>

don't use this. check out snippet above, did remove this (and remove space in value attribute itemname because making me add space mistake)

your code should be:

function caltotitema() {   var item = document.getelementbyid("itemname").value;   var itemq = document.getelementbyid("itemquantity").value;   var itemtotal = 0;   switch (item) {     case "eggs":       itemtotal = 3.5 * itemq;       break;     case "milk":       itemtotal = 4.5 * itemq;       break;   }   document.getelementbyid("itemtotaldisplay").innerhtml = itemtotal; } 

the keyword this behaves differently on other languages, please have @ the docs

when used inside function, either returns global object (window) when not in strict mode, or undefined or base caller when in strict mode.

function context

inside function, value of depends on how function called.

simple call

function f1(){   return this; }  f1() === window; // global object 

in case, value of not set call. since code not in strict mode, value of must object defaults global object.

function f2(){   "use strict"; // see strict mode   return this; }  f2() === undefined;  

in strict mode, value of remains @ whatever it's set when entering execution context. if it's not defined, remains undefined. can set value, such null or 42 or "i not this".

note: in second example, should undefined, because f2 called without providing base (e.g. window.f2()). feature wasn't implemented in browsers when first started support strict mode. result, incorrectly returned window object.