The number assigned to the variable using Case Switch, returning 0 instead of the correct result

Question

I am new to JavaScript and I would like to simulate an exercise using HTML and JavaScript. Basically, I have two inputs that accept 1: the name of the product and 2) the amount of this element. When the user clicks a button, a function is executed that calculates the total amount for this item. In this function, I use the switch statement to calculate the correct amount of $ according to the product. Then the function should print itemTotal, which is the result of itemQ (item number) * correction value for this item (3.5 for eggs). But itemTotal appears with 0 zero. The switch statement does not seem to recognize it. If I make this a local value inside the switch, then I cannot use the switch statement outside. 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> 

Do not use this . Discard the snippet above, all I did was remove this (and also remove the space in the value attribute for itemName because it made me add 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; } 

This keyword behaves differently than in other languages, please view documents

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

function context

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

Simple challenge

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

In this case, the value of this is not an established call. Since the code is not in strict mode, the value from this should always be an object, so it defaults to a global object.

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

In strict mode, the value of this parameter remains regardless of what it set when entering the execution context. If it is not, it remains undefined. It can also be set to any value, such as null or 42 or "I'm not that."

Note. In the second example, this should be undefined, since f2 was (without a window). This feature was not implemented in some browsers when they first started to support strict mode. As a result, they incorrectly returned the window object.

Answer 2

The only problem I ran into was that you had space in the value of itemName. Unknown, I find that I am gaining eggs and getting eggs. If I came back, it would work well. For comments, I would recommend using a drop-down list to better control the input values.

Fiddle: Here

 <div id="container"> <header> <h1>My Cash Register</h1> </header> <div id="pad"> <div>Enter item <select id="itemName"> <option value="eggs">Eggs</option> <option value="milk">Milk</option> </select> </div> <div>Enter quantity of the item <input type="number" id="itemQuantity" value="0"> </div> <button id="button">Calculate Total Amount per Item</button> <p>The total amount for this item:</p> <p id="itemTotalDisplay"></p> </div> </div>` 

Answer 3

Your code works well.

All you have to do is one of two things:

Add a trimmer () to the line where you get the element (it will remove all spaces before and after the line you enter in the input, it is good practice to do this always):

 var item = document.getElementById("itemName").value.trim(); 

Or remove the space from the input value of the element:

 <input type="text" id="itemName" value=""> 

The problem is that you get the Item value with a space at the beginning of the egg, so the switch ignores your input because there is no case that matches this.

Also, as a recommendation, do not use the form for each input. The form tag should surround all inputs with labels that are necessary in your operation.