title: Javascript conditional element span based on the simple math result
body: <p>i have a simple script, which calculates for example: eggs based on the inputs/divided by a predefined number with a conditional checkbox to change the divided number. What i would like is to show/span links next to the results output, which are conditinal based on the result.</p>
  
  <p>For example:</p>
  
  <ul>
  <li>if a result is less than 30, span link 1</li>
  <li>if a result is more than 30 and below 50, span link 2</li>
  <li>if a result is more than 50 and below 70, span link 3</li>
  <li>if a result is more than 70, span link 4</li>
  </ul>
  
  <p>Current layout: <a href="https://jsfiddle.net/5uqkaavv/1/" rel="nofollow">JsFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function calculate() {
    var myBox1 = document.getElementById('box1').value;
    var myBox2 = document.getElementById('box2').value;
    var myBox3 = document.getElementById('box3').value;
    var result = document.getElementById('result');
    var divide = (document.getElementById('changeValue').checked ? 35 : 25);
    var myResult = myBox1 * myBox2 * myBox3 / divide;
    result.value = myResult.toFixed(2) + ' eggs';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" id="box1" oninput="calculate()" /&gt;
  &lt;input type="text" id="box2" oninput="calculate()" /&gt;
  &lt;input type="text" id="box3" oninput="calculate()" /&gt;
  
  &lt;input id="result" /&gt;
  
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  
  &lt;input type="checkbox" name="changeValue" id="changeValue" /&gt;
  &lt;label for="changeValue"&gt;Divide with 35&lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help aprriciated, thanks.</p>