Javascript HTML 單選按鈕 - 在 web 瀏覽器中無法正確呈現代碼的幫助

Question

我正在使用單選按鈕構建簡單的代碼，單擊該按鈕會產生響應“你用它打敗了龍”，然后是武器的名稱。

有人可以檢查代碼並告訴我為什么它不能在 web 服務器中正確呈現嗎？

這是代碼：

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

Answer 1

嘗試這個：

  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/

如果你想避免 js 代碼中的 eventListener 然后這樣做，（應該是 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>

Javascript HTML 單選按鈕 - 在 web 瀏覽器中無法正確呈現代碼的幫助

問題描述

1 個解決方案

解決方案1
1 2020-03-10 10:37:47

Javascript HTML 單選按鈕 - 在 web 瀏覽器中無法正確呈現代碼的幫助

問題描述

1 個解決方案

解決方案1 1 2020-03-10 10:37:47

解決方案1
1 2020-03-10 10:37:47