title: Javascript output not showing
body: <p>We have a JavaScript assignment that we have to do. We have to build a sentence generator. When I run this in Chrome, nothing happens when I click the buttons. When I check the Console Log, it says <code>Uncaught ReferenceError: mySubject is not defined.</code> I thought I defined it already in <code>element1.onclick</code> function? </p>
  
  <p>This is my code so far:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="buttons"&gt;
              &lt;button id="btn1"&gt;Generate subject&lt;/button&gt;
              &lt;input name="subject" type="text" id="subject"
              /&gt;
              &lt;button id="btn2"&gt;Generate verb&lt;/button&gt;
              &lt;input name="verb" type="text" id="verb" /&gt;
              &lt;button id="btn3"&gt;Generate adjective&lt;/button&gt;
              &lt;input name="adj" type="text" id="adj" /&gt;
              &lt;button id="btn4"&gt;Generate object&lt;/button&gt;
              &lt;input name="object" type="text" id="object" /&gt;
          &lt;/div&gt;
          &lt;!--buttons closing div--&gt;
          &lt;div&gt;
              &lt;p id="output"&gt;asjkldhfahfjasf;d&lt;/p&gt;
          &lt;/div&gt;
          &lt;!--output closing div--&gt;
      &lt;/div&gt;
      &lt;!--container closing div--&gt;
      &lt;script&gt;
          var subject = new Array("Mel Gibson", "Optimus-Prime", "The Cat-lady", "The student", "My Dentist");
  
          var verb = new Array("licks", "pets", "hugs", "stabs", "eats");
  
          var adj = new Array("fat", "ugly", "delicious", "redundant", "hopeless");
  
          var object = new Array("cat", "bacon-strip", "dog-house", "bigmac", "hobo");
  
  
          var element1 = document.getElementById("btn1");
          var element2 = document.getElementById("btn2");
          var element3 = document.getElementById("btn3");
          var element4 = document.getElementById("btn4");
  
          element1.onclick = function() {
              mySubject = subject[Math.random() * subject.length]
          };
  
          element2.onclick = function() {
              myVerb = verb[Math.random() * verb.length]
          };
  
          element3.onclick = function() {
              myAdj = adj[Math.random() * adj.length]
          };
  
          element4.onclick = function() {
              myObject = object[Math.random() * object.length]
          };
  
          document.getElementById("output").innerHTML = mySubject + myVerb + " the" + myAdj + myObject + ".";
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I'm starting to get so lost and have no idea what to do and this is only one of the many problems I have.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>So I got some help with my Javascript and everything is now working except for the output. I want it to output into the output div, but it's not outputting anything. This is my code now:</p>
  
  <p></p>
  
  <p>
      </p>
  
  <pre><code>&lt;h1&gt;The Amazing Fantastical Sentence Generator!&lt;/h1&gt;
  
  &lt;h4&gt;Have hours of fun with your imaginary friends!&lt;/h4&gt;
  &lt;/div&gt;&lt;!--title closing div--&gt;
  &lt;div id="buttons"&gt;
  
  &lt;button id="btn1"&gt;Generate subject&lt;/button&gt;
  &lt;input name="subject" type="text" id="insubject"/&gt;
  
  
  
  &lt;button id="btn2"&gt;Generate verb&lt;/button&gt;
  &lt;input name="verb" type="text" id="verb"/&gt;
  
  &lt;button id="btn3"&gt;Generate adjective&lt;/button&gt;
  &lt;input name="adj" type="text" id="adj"/&gt;
  
  
  &lt;button id="btn4"&gt;Generate object&lt;/button&gt;
  &lt;input name="object" type="text" id="object"/&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div &gt;
  &lt;p id="output"&gt;&lt;/p&gt;
  &lt;/div&gt;&lt;!--output closing div--&gt;
  
  &lt;/div&gt;&lt;!--container closing div--&gt;
  
  &lt;script&gt;
  
  
  var subject=new Array("Mel Gibson", "Optimus-Prime", "The Cat-lady", "The student", "My        Dentist");
  
  var verb=new Array("licks", "pets", "hugs", "stabs", "eats");
  
  var adj=new Array("fat", "ugly", "delicious", "redundant", "hopeless");
  
  var object=new Array("cat", "bacon-strip", "dog-house", "bigmac", "hobo");
  
  
  var element1=document.getElementById("btn1");
  var element2=document.getElementById("btn2");
  var element3=document.getElementById("btn3");
  var element4=document.getElementById("btn4");
  
  element1.onclick=function()  {document.getElementById('insubject').value=subject[Math.floor(Math.random()*(subject.length))];}
  
  element2.onclick=function(){document.getElementById('verb').value=verb[Math.floor(Math.random()*(verb.length))];}
  
  element3.onclick=function(){document.getElementById('adj').value=adj[Math.floor(Math.random()*(adj.length))];}
  
  element4.onclick=function(){document.getElementById('object').value=object[Math.floor(Math.random()*(object.length))];}
  
  document.getElementById("output").innerHTML= document.getElementById("insubject").value + document.getElementById("verb").value + " the" + document.getElementById("adj").value + document.getElementById("object").value + ".";
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>