title: Adding Javascript functions to forms
body: <p>I'm learning JavaScript in school and have some homework labs. I created some forms and I'd like <strong>the buttons to accomplish some things when I press it</strong>, I'll just ask for help on the first couple buttons, as I just need examples so I can work on the harder ones on my own. Here's what I need for the first couple buttons:</p>
  
  <ol>
  <li><p>JavaScript function <code>hello( )</code> that gets the name and year of birth entered into the corresponding text boxes, and outputs the string “Hello [name] you were born in [year]”. The string will be output inside the paragraph element.</p></li>
  <li><p>Call the <code>hello( )</code> function from the Hello button.</p></li>
  <li><p>JavaScript function <code>calcAge( )</code> that gets the year of birth from the textbox, and computes the age of the person. Compute the age by subtracting the year of birth from the current year. Then output the string “You are [age] years old”. The string will be output inside the paragraph element.</p></li>
  <li><p>Call the <code>calcAge( )</code> function from the Calc Age button.</p></li>
  </ol>
  
  <p>Thank you in advance for any help. I'm taking an independent study course and having a hard time. Here's my html for the forms.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Forms Page&lt;/title&gt;  
          &lt;style&gt;
  
              form {
                  width: 500px; margin: 0px auto;
                  border:1px solid khaki; background-color: antiquewhite;
                  border-collapse:collapse; padding: 10px; margin-bottom: 20px;
              }
              form h2 { margin: 0; }
              input {
                  margin:5px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;h1&gt;Practice Manipulating Forms #1&lt;/h1&gt;    
  
          &lt;form id='calcForm'&gt;
              &lt;h2&gt;Calc Form&lt;/h2&gt;
              &lt;span&gt;Name:&lt;/span&gt;
              &lt;input type='text' name='name' id='name' &gt;&lt;br&gt;
              &lt;span&gt;Year of Birth:&lt;/span&gt;
              &lt;input type='text' name='yob' id='yob' &gt;&lt;br&gt;
  
              &lt;input type='button' name='btnCalc' id='btnHello' value='Hello' &gt;
              &lt;input type='button' name='btnCalc' id='btnCalc' value='Calc Age' &gt;    
  
              &lt;p id='pForm'&gt;&lt;/p&gt;
          &lt;/form&gt;
  
          &lt;form id='listForm'&gt;
              &lt;h2&gt;List Form&lt;/h2&gt;
  
              &lt;span&gt;Item:&lt;/span&gt;
              &lt;input type='text' name='item' id='item' &gt;&lt;br&gt;
  
              &lt;input type='button' name='btnAdd' id='btnAdd' value='Add to List' &gt;
              &lt;input type='button' name='btnClear' id='btnClear' value='Clear List' &gt;
              &lt;input type='button' name='btnShow' id='btnShow' value='Show List' &gt;  
  
              &lt;p id='pList'&gt;&lt;/p&gt;
          &lt;/form&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>