JavaScript beginner - using variables in if else

Question

I am trying to learn JavaScript and want to learn from the bottom. I'm trying to code an cash register, and this is what I have got so far.

var egg = {
  pName : "Egg",
  price : 21.95,
  discount : 20
}

var milk = {
  pName : "Milk",
  price : 4.95,
  discount : 20
}

var juice = {
  pName : "Juice",
  price : 15.50,
  discount : 0
}

var totalCost = 0;


var add = function(){
  i = document.querySelector('.addIt').value;
  productCost = "";
  ProductName = "";
  if (i === "egg") {
    productCost = egg.price
    ProductName = egg.pName
    totalCost = totalCost + productCost;
    addElement();
  } else if (i === "milk") {
    productCost = milk.price
    ProductName = milk.pName
    totalCost = totalCost + productCost;
    addElement();
  } else if (i === "juice") {
    productCost = juice.price
    ProductName = juice.pName
    totalCost = totalCost + productCost;
    addElement();
  } else {
    alert("Det kan du ikke købe!")

  }
  function addElement(){
    var newDiv = document.createElement("div");
    var newContent = document.createTextNode(ProductName + " " + productCost);
    newDiv.appendChild(newContent);

    var currentDiv = document.querySelector('.items');
    currentDiv.appendChild(newDiv);
  }

  document.querySelector('.kvitt .totalPrice span').innerHTML = totalCost;
}

The HTML

<body>
Velkommen til min butik.

Her er hvad du kan købe: egg, milk, juice
<br>
Tast det her ---> <input class="addIt" type="text" ></input>
<button onclick="add();"> Tilføj vare</button>
<br />

<div class="kvitt">Kvitering
<div class="items">her</div>
<div class="totalPrice">Total pris : <span></span></div>
</div>
<script src="script.js"></script>
</body>

I know it's not perfect so don't judge, I'm trying to learn :)

What I want is to reduce the code a bit, but I can't seem to get it to work.

I want to call my object directly in my totalCost update.

Example: If i = egg, then I should be able to write i.pName, right? Or am I missing somthing? :)

UPDATE: I want to know how I can take the answer from the input, and make something like this = answer.price :)

You are able to write it but it wouldn't work. Your i variable is of type String and String doesn't have a component `price` — , Mar 18 '16 at 08:52
Confusing to understand without HTML, but you should go through this article about how scoping works in JS. http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html — InfinitePrime, Mar 18 '16 at 08:53
Just added the HTML. I want to be able in each if sentence to write i.price so i can remove the if sentence. Is that the right way to do it? — Patrick Knudsen, Mar 18 '16 at 09:02
_Please_ get used to declaring your variables properly: `var productCost = ""`, things like that. By leaving out the `var`, you're creating global variables, which is hardly ever desirable. — Cerbrus, Mar 18 '16 at 09:18
@PatrickKnudsen The solution is to use a `class` to define a `Product`. Each product will be an instance of the class. To use each instance easily without rewriting same instructions: you can define global object named `Products` to contain all your products. In JS, an object is similar to an associative array in which each item can be a property or a function. Here is a CodePen with a working example: http://codepen.io/anon/pen/mPRzQv — ADreNaLiNe-DJ, Mar 18 '16 at 09:19
There is no such thing as "Classes" in JS. Just functions that more or less behave like them. — Cerbrus, Mar 18 '16 at 09:20
@Cerbrus, "There is no such thing as 'Classes' in JS" - [I disagree, although it's probably a pedantic argument](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes). — zzzzBov, Mar 18 '16 at 19:02
_"The class syntax is not introducing a new object-oriented inheritance model to JavaScript."_ 'nuff said ;-) — Cerbrus, Mar 18 '16 at 19:10

caxinaswin · Answer 1 · 2016-03-18T08:54:47.310

-4

Why you do this:

productCost = juice.price
ProductName = juice.pName
totalCost = totalCost + productCost;

If what you want is reducing some code i suggest starting here:

 totalCost = juice.price + productCost;

To solve the problem you can get the name from the HTML and do something like that: totalCost = name.price

edited Mar 18 '16 at 08:54

answered Mar 18 '16 at 08:53

caxinaswin

71
3
9

1

But that doesn't answer his question – Mar 18 '16 at 08:53
I am using the variable later ind the addElement function :) – Patrick Knudsen Mar 18 '16 at 09:05

JavaScript beginner - using variables in if else

1 Answers1