title: Calculate the price of the items, depending on its quantity
body: <p>I'm trying to make block with the prices. The unit price varies depending on its quantity of units. For example:</p>
  
  <pre>
  Quantity — Price for each
  1____________________$110
  10___________________$105
  20___________________$100
  ...
  Number of items:__
  Total:
  Price for each:
  </pre>
  
  <p>There is a need to write a the text field into which the user enters the number of items, and everything is recalculating and summing on the fly.</p>
  
  <p>Here is my realization of this task:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var price1 = 110,
    price2 = 105,
    price3 = 100,
    qty1 = 1,
    qty2 = 10,
    qty3 = 20;
  
  function conversion(val) {
    var div = document.getElementById("div"),
      price = document.getElementById("price");
    if (isNaN(val)) {
      div.innerHTML = "";
      price.innerHTML = "";
    } else {
      switch (true) {
        case (val &lt;= 0):
          {
            div.innerHTML = "";
            price.innerHTML = "";
            break;
          }
        case (val &gt;= qty1 &amp;&amp; val &lt; qty2):
          {
            div.innerHTML = val * price1;
            price.innerHTML = price1;
            break;
          }
        case (val &gt;= qty2 &amp;&amp; val &lt; qty3):
          {
            div.innerHTML = val * price2;
            price.innerHTML = price2;
            break;
          }
        case (val &gt;= qty3):
          {
            div.innerHTML = val * price3;
            price.innerHTML = price3;
            break;
          }
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    Quantity — Price for each
  &lt;/div&gt;
  &lt;div&gt;
    &lt;div&gt;1 — $110&lt;/div&gt;
    &lt;div&gt;10 — $105&lt;/div&gt;
    &lt;div&gt;20 — $100&lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
    Number of items:
    &lt;div&gt;
      &lt;input id="txt" onblur="conversion(this.value)" onchange="conversion(this.value)" onkeypress="conversion(this.value)" onkeyup="conversion(this.value)" type="number"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
    Total:
    &lt;div id="div"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
    Price for each:
    &lt;div id="price"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How it can be properly implemented, taking into account the fact that the lines with the quantity and unit price can be from one to infinity (values are taken from the database)?</p>
  
  <p>I think it is possible to record the price and quantity in data-atributes and parse it with JS. Like this:</p>
  
  <pre><code>...
  &lt;div data-quantity="10" data-price="105"&gt;
    &lt;span class="quantity"&gt;10&lt;/span&gt;
    &lt;span class="price"&gt;105&lt;/span&gt;
  &lt;/div&gt;
  ...
  </code></pre>
  
  <p>Thanks!</p>