title: JavaScript Password Generator - Output
body: <p>(I am new to programming) </p>
  
  <p>The program: I have made a relatively simple JavaScript program, that generates a password when you click on a button.</p>
  
  <p>The problem: Displaying the password with <code>document.write</code>, the whole page is overwritten, meaning that the button is removed and you have no opportunity to generate a new password. <strong>Therefore</strong>, I would like the password to go inside the paragraph with Id "pw".</p>
  
  <p>Note that <strong>document.write</strong> is disabled in JSFiddle, so the result is set to display in console.
  JSFiddle: <a href="https://jsfiddle.net/3qh01ctp/1/" rel="nofollow noreferrer">https://jsfiddle.net/3qh01ctp/1/</a></p>
  
  <p>Thank you very much in advance, any help/advice appreciated!</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>var arr = ["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"];
  
  function generate () {
    for (i = 0; i &lt; 10; i++) {
      randomLetter = arr[Math.floor(arr.length * Math.random())];
    console.log(randomLetter);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;button onclick="generate();"&gt;Generate password&lt;/button&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p id="pw"&gt;
      &lt;!-- password should go here --&gt;
    &lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>