title: Undesirable need of double run for effect with click on basic JS to DOM
body: <p>Im new to development, and for some study practices Im doing this vanilla JS that prints to DOM Dice Roller. </p>
  
  <p>The main idea is for the user to input the number of sides and the number of dice, press a roll and gets all the dice results and the sum on the DOM. </p>
  
  <p>It is working, but I cant figure out why <strong>I need to click twice</strong> for the event to happen, any tips, please? </p>
  
  <p><a href="http://codepen.io/rufi_rufino/pen/MKdrbj" rel="nofollow">http://codepen.io/rufi_rufino/pen/MKdrbj</a></p>
  
  <pre><code>//Variables
  
  var form = document.getElementById('mytest');
  var sideField = document.getElementById('sides');
  var numberField = document.getElementById('numbofdices');
  var numberOfSides = 0;
  var numberOfDice = 0;
  var arrayOfResults = [];
  var resultOfSum = 0;
  
  
  //to get dice data (sides and # of dices) form html forms - Using .preventdefault() to stop from sending form and staying with result;
  
  form.addEventListener('submit', function(e) {
  //to get the value of the number of sides the dice has:
      numberOfSides = (sideField.value);
  //to get the value of the number of dices in the game:
      numberOfDice = (numberField.value);    
      e.preventDefault();
  
  });
  
  
  
  //Basic Functions
  
  //function to calculate a result and create the array of all results
  function createArrayOfDice () {
  
      for (i = 1 ; i &lt;= numberOfDice ; i++) {
  
          var result = 0;
          result = Math.floor((Math.random() * numberOfSides) + 1);
          arrayOfResults.push(result);
  
      }
  
  }
  
  // function to sum the results of all dice
  function sumOfAllDices() {
  
      // the line below "resets" the output if user clicks more than once
      document.getElementById("results").innerHTML = " ";
  
      for (i = 0 ; i &lt; arrayOfResults.length ; i++) {
  
  
          resultOfSum = resultOfSum + arrayOfResults[i];
          document.getElementById("results").innerHTML = document.getElementById("results").innerHTML + "&lt;div class='diceroll'&gt;" + arrayOfResults[i] + "&lt;/div&gt;";
  
      }
  
      console.log(resultOfSum);
      document.getElementById("sum").innerHTML = "&lt;div class='dicesum'&gt;" + resultOfSum + "&lt;/div&gt;";
      resultOfSum = 0;
  
  }
  
  //function that works when user clicks the 'Roll' submit button on html
  function myClick () {
  
      createArrayOfDice();
      // for console purpose(see if it is wokring)
      console.log(arrayOfResults);
      sumOfAllDices();
      // for console study only
      console.log ("The input number for how many sides the dice has is:" + numberOfSides);
      console.log ("The input number for the number of dices is:" + numberOfDice);
      arrayOfResults = [];
  
  };
  </code></pre>
  
  <p>If anyone could help, I appreciate. This is my first question as well, if I made any mistake, I would be glad to take it in consideration.</p>