CODEWITHSUNDEEP
javascripthtmlradio-button
Daniel Kapeleti
Daniel Kapeleti

Reputation: 9

Javascript HTML radio buttons - assistance with code not rendering properly in web browser

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>

Functioning code as snippet:

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
<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>

Upvotes: 0

Views: 52

Answers (1)

EugenSunic
EugenSunic

Reputation: 13703

Try this:

  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;
  } //


document.getElementsByTagName('button')[0].addEventListener('click', ()=>{ fight()})

https://jsfiddle.net/eugensunic/eo96z3a2/5/

if you want to avoid the eventListener in the js code then do this, (should be onlick)

<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>

  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;
  } //


 </script>
</html>

Upvotes: 1

Related Questions