title: New to javascript, radio buttons don't work, not allowed to use parameters
body: <p>I'm trying to make radiobuttons with a javascript function that gets called when a button is selected to make an image appear depending on what they click. However, after looking it up for a while I have nothing since some tell me to do document.formName.name.value; some tell me to use an id with my buttons and just use a <code>document.getElementByID("");</code> etc.</p>
  
  <p>This is for a project and we havent used parameters yet and I dont know how to implement them in the HTML as well</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          img{height:200px;}
          body{background-image:url('wood.jpg');}
          span.a1{margin-left:150px; display:inline-block;}
          h2, span, h4, div{font-family:helvetica; color:white;}
          h2 {text-align:center; margin-top:150px;}
          img.display{position:absolute; left:400px; height:300px; }
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
          dex1=0;
          stam1=0;
          str1=0;
          intel1=0;
          agil1=0;
          function counter()
          {
              document.getElementById("dex").innerHTML = dex1;
              document.getElementById("stam").innerHTML = stam1;
              document.getElementById("str").innerHTML = str1;
              document.getElementById("intel").innerHTML = intel1;
              document.getElementById("agil").innerHTML = agil1;
          }
          function classChoice()
          {
              if(document.getElementById('mage').checked)
                  {
                      classtype = "&lt;img class='display' src='mage.jpg'&gt;";
                      document.getElementById("mage").innerHTML=classtype;
                  }
              else if(document.getElementById('paladin').checked)
                  {
                      classtype = "&lt;img class='display' src='paladin.jpg'&gt;";
                      document.getElementById("Paladin").innerHTML=classtype;
                  }
              else if(document.getElementById('hunter').checked)
                  {
                      classtype = "&lt;img class='display' src='hunter.jpg'&gt;";
                      document.getElementById("hunter").innerHTML=classtype;
                  }
              else if(document.getElementById('rogue').checked)
                  {
                      classtype = "&lt;img class='display' src='rogue.jpg'&gt;";
                      document.getElementById("rogue").innerHTML=classtype;
                  }
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h2&gt; Awesome MMO &lt;/h2&gt;
      &lt;span class="a1"&gt;
          &lt;h4&gt; Dexterity &lt;/h4&gt;
          &lt;span onmousedown="dex1++; counter();"&gt;
              +
          &lt;/span&gt;
          &lt;span id="dex"&gt;
          0
          &lt;/span&gt;
          &lt;span onmousedown="dex1--; counter();"&gt;
              -
          &lt;/span&gt;
      &lt;/span&gt;
      &lt;span class="a1"&gt;
          &lt;h4&gt; Stamina &lt;/h4&gt;
          &lt;span onmousedown="stam1++; counter();"&gt;
              +
          &lt;/span&gt;
          &lt;span id="stam"&gt;
          0
          &lt;/span&gt;
          &lt;span onmousedown="stam1--; counter();"&gt;
              -
          &lt;/span&gt;
      &lt;/span&gt;
      &lt;span class="a1"&gt;
          &lt;h4&gt; Strength &lt;/h4&gt;
          &lt;span onmousedown="str1++; counter();"&gt;
              +
          &lt;/span&gt;
          &lt;span id="str"&gt;
          0
          &lt;/span&gt;
          &lt;span onmousedown="str1--; counter();"&gt;
              -
          &lt;/span&gt;
      &lt;/span&gt;
      &lt;span class="a1"&gt;
          &lt;h4&gt; Intellect &lt;/h4&gt;
          &lt;span onmousedown="intel1++; counter();"&gt;
              +
          &lt;/span&gt;
          &lt;span id="intel"&gt;
          0
          &lt;/span&gt; 
          &lt;span onmousedown="intel1--; counter();"&gt;
              -
          &lt;/span&gt;
      &lt;/span&gt;
      &lt;span class="a1"&gt;
          &lt;h4&gt; Agility &lt;/h4&gt;
          &lt;span onmousedown="agil1++; counter();"&gt;
              +
          &lt;/span&gt;
          &lt;span id="agil"&gt;
          0
          &lt;/span&gt;
          &lt;span onmousedown="agil1--; counter();"&gt;
              -
          &lt;/span&gt;
      &lt;/span&gt;
              &lt;h2&gt; Class &lt;/h2&gt;
              &lt;span class="a1"&gt;
              &lt;br /&gt;
              &lt;form name="class"&gt;
                      &lt;input type="radio" name = "classes" id="mage" onmousedown="classChoice();"&gt; &lt;img src = "mage.jpg" /&gt;
                      &lt;input type="radio" name = "classes" id = "Paladin" onmousedown="classChoice();"&gt; &lt;img src = "Paladin.png" /&gt;
                      &lt;input type="radio" name = "classes" id = "hunter" onmousedown="classChoice();"&gt; &lt;img src = "hunter.PNG" /&gt;
                      &lt;input type="radio" name = "classes" id = "rogue" onmousedown="classChoice();"&gt; &lt;img src = "rogue.jpg" /&gt;           
              &lt;/form&gt;
              &lt;/span&gt;
      &lt;span id="picture"&gt;
      &lt;/span&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>