title: How to add and use a Div as a total calculator using Javascript?
body: <p>I need to make a function which calculates the sum of a users input and compare it to a previously given value, returning the result to the user.</p>
  
  <p>e.g. You previously said you eat 20 meals a week but you have currently listed 5 Dinners, 7 Lunches and 36 Breakfasts. This totals 48 meals.</p>
  
  <p>So far I can read my inputs and add them to a variable as the respondent types it in, showing this in an already existing div. But I need to create a div to show it in for it's actual use. This is where I'm having problems as I can't get this code working.</p>
  
  <p>Note I'm new to JS so some of my code might make no sense. This is everything I've got so far, the bit commented out is what is causing trouble, the rest (assuming I have a div ID'd as 'output') works fine:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
      var count = 0;
      function summer() {
          var num1 = (parseFloat(document.getElementById("number1").value)) || 0;
          var num2 = (parseFloat(document.getElementById("number2").value)) || 0;
          var num3 = (parseFloat(document.getElementById("number3").value)) || 0;
          count = num1+num2+num3;
       // if(!document.getElementById("output")) {
       //     var newDiv = document.createElement('div');
       //     var divIdName = 'output';
       //     var myDiv = document.getElementById('buttoner');
       //     var content = document.createTextNode("")
       //     newDiv.setAttribute('id',divIdName);
       //     newDiv.appendChild(content);
       //     document.body.insertBefore(newDiv, myDiv)
       //     };
          document.getElementById("output").innerHTML = "Your running total = "+count
  };
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;input type="text" id="number1" onKeyUp="summer()" name="number" /&gt;
  &lt;input type="text" id="number2" onKeyUp="summer()" name="number" /&gt;
  &lt;input type="text" id="number3" onKeyUp="summer()" name="number" /&gt;
  &lt;div id='Buttoner'&gt;
  &lt;button type="button" onclick="summer()"&gt;Clicking here adds your input to the "count" variable&lt;/button&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks!</p>
  
  <p>edit: thought it might be worth noting that the 'buttoner' div is left over from a previous stage of experimenting and is now used as a placemarker for inserting the new div.</p>