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

Question

I am a beginner in JavaScript and I would like to simulate an exercise using HTML and JavaScript. Basically, I have two inputs that take 1: the name of a product and 2) the quantity of this item. When user click on a button, the function that calculates the total amount for that item is executed. On this function, I use switch statement in order to calculate the right $amount according to the product. Then the function should print the itemTotal which is the result of the itemQ (Quantity of the item) * a fix value for that item (3.5 for eggs). But itemTotal appear with 0 zero. It seems that the switch statement does not recognize it. If I make it a local value inside switch, then I cannot used outside of switch statement. What can I do? Any 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 the item
      <input type="number" id="itemQuantity" value="0">
    </form>
    <button onclick="calTotItemA()">Calculate Total Amount per Item</button>
    <p>The total amount for this item:</p>
    <p id="itemTotalDisplay"></p>
  </div>
</div>

Answer 1

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 the item
      <input type="number" id="itemQuantity" value="0">
    </form>
    <button onclick="calTotItemA()">Calculate Total Amount per Item</button>
    <p>The total amount for this item:</p>
    <p id="itemTotalDisplay"></p>
  </div>
</div>

Don't use this. Check out the snippet above, all I did was remove this (and also remove the space in the value attribute for itemName because it was making me add an extra space by 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 than on other languages, please have a look at the docs

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

Function context

Inside a function, the value of this depends on how the function is called.

Simple call

function f1(){   return this; }

f1() === window; // global object

In this case, the value of this is not set by the call. Since the code is not in strict mode, the value of this must always be an object so it defaults to the global object.

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

f2() === undefined; 

In strict mode, the value of this remains at whatever it's set to when entering the execution context. If it's not defined, it remains undefined. It can also be set to any value, such as null or 42 or "I am not this".

Note: In the second example, this should be undefined, because f2 was called without providing any base (e.g. window.f2()). This feature wasn't implemented in some browsers when they first started to support strict mode. As a result, they incorrectly returned the window object.