title: Why is my random password generator generating more than however many characters I need it to?
body: <p>I am making a random password generator with JavaScript and it is generating more characters than needed. I will explain after showing code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function gen() {
    var symbol = document.getElementById("symbolsCB");
    var number = document.getElementById("numbersCB");
    var upper = document.getElementById("uppersCB");
    var length = document.getElementById("numberOfChars").value;
    var op = document.getElementById("outputBox");
    var list = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
    for (var i = 0; i &lt; length; i++) {
      if (symbol.checked == true) {
        var symbols = ["?", "!", "@", "#", "$", "%", "^", "&amp;", "*", "(", ")", ",", ".", "+", "=", "[", "]", "{", "}", ";", ":", "&lt;", "&gt;"];
        symbols.push.apply(list, symbols);
        let char = list[Math.floor(Math.random() * list.length)];
        op.value = op.value + char;
      }
      if (number.checked == true) {
        var numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
        numbers.push.apply(list, numbers);
        let char = list[Math.floor(Math.random() * list.length)];
        op.value = op.value + char;
      }
      if (upper.checked == true) {
        var uppers = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
        uppers.push.apply(list, uppers);
        let char = list[Math.floor(Math.random() * list.length)];
        op.value = op.value + char;
      }
      if (symbol.checked == false &amp;&amp; number.checked == false &amp;&amp; upper.checked == false) {
        let char = list[Math.floor(Math.random() * list.length)];
        op.value = op.value + char;
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" name="numbers" id="numbersCB" class="cb"&gt;
  &lt;label for="numbers"&gt; Include Numbers &lt;/label&gt;
  &lt;br/&gt;
  &lt;input type="checkbox" name="uppers" id="uppersCB" class="cb"&gt;
  &lt;label for="uppers"&gt; Include Uppercase Letters &lt;/label&gt;
  &lt;br/&gt;
  &lt;input type="checkbox" name="symbols" id="symbolsCB" class="cb"&gt;
  &lt;label for="symbols"&gt; Include Symbols (@, #, $, %) &lt;/label&gt;
  &lt;br/&gt;
  &lt;input type="text" id="numberOfChars" name="numberOfChars" placeholder="Length of password..."&gt;
  &lt;br/&gt;
  &lt;button onclick="gen()"&gt; Generate Random Password &lt;/button&gt;
  
  &lt;input type="text" id="outputBox" name="outputBoxName" disabled="disabled"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>For example, If I put 7 for the length and check all 3 boxes, I will get 21. And, if i put 10 for length and check 2 boxes, 20 characters appear. You get the pattern. Please explain why it's happening and please tell me how to fix it. Thank you</p>