Javascript HTML переключатели - помощь с неправильным отображением кода в веб-браузере - PullRequest
Новая
       28

Javascript HTML переключатели - помощь с неправильным отображением кода в веб-браузере

0 голосов
/ 10 марта 2020

Я создаю простой код с переключателями, которые при нажатии дают ответ «Ты победил дракона», а затем название оружия.

Может кто-нибудь проверить код и сказать, почему это так? неправильно отображается на веб-сервере?

Вот код: 

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

Функциональный код как фрагмент: 

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>

1 Ответ

0 голосов
/ 10 марта 2020

Попробуйте это: 

  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/

, если вы хотите избежать EventListener в коде js, тогда сделайте это, (должно быть 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>
...