Javascript HTML radio buttons

I am building the simple code with radio buttons which on click produce response “You defeated the dragon with” and then the name of the weapon.

Can someone please check the code and tell my why it does not render correctly in web server ?

Here is the code:

<body>
  <h1>With what weapon will you fight the dragon?</h1>  
<form action = ""> 
 <fieldset> 
  <input type = "radio"  name = "weapon"  id = "radSpoon"  value = "spoon"  checked = "checked" />  

<label for = "radSpoon">Spoon</label> 
 <input type = "radio"  name = "weapon"  id = "radFlower"  value = "flower" /> 
  <label for = "radSpoon">Flower</label> 
   <input type = "radio"  name = "weapon"  id = "radNoodle"  value = "wet noodle" />
     <label for = "radNoodle">Wet Noodle</label>
     <button type = "button"  onclick = "fight()">fight the dragon  </button> 
    </fieldset>
      </form> 
     <div id = "output"> 
      </div> 
       </body>


<script type = "text/javascript">   

// from radioGroup.html  

function fight(){ 
 var weapon = document.getElementsByName("weapon");  
 for (i = 0; i < weapon.length; i++){  
 currentWeapon = weapon[i]; 
  if (currentWeapon.checked){ 
   var selectedWeapon = currentWeapon.value;
     } // end if 
    } // end for 
 var output = document.getElementById("output"); 
  var response = "<h2>You defeated the dragon with a ";
    response += selectedWeapon + "<\/h2> \n";
    output.innerHTML = response;  
  } // end function
  </script>

When I try out that code on a test page, it works for me.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.