javascript - Javascript HTML 单选按钮 - 帮助在 Web 浏览器中无法正确呈现代码
问题描述
我正在使用单选按钮构建简单的代码,单击该按钮会产生响应“你用它打败了龙”,然后是武器的名称。
有人可以检查代码并告诉我为什么它不能在 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>
解决方案
尝试这个:
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>
推荐阅读
- arrays - C中文件范围错误的可变修改“数据”
- swiftui - 为什么这个 SwiftUI LazyHStack 不断更新?
- c - 如何在 C 中使用指针时实现 Scanf
- python - Django ManyToManyField 反向关系问题
- javascript - Firestore 在 React Native 中显示查询结果
- html - CSS/HTML CSS 样式表锁定更改并且无法恢复它们?
- android - 如何为 Android TabLayout 添加水平滚动指示器
- mongodb - 需要得到结合数据库及其集合的查询结果
- c# - 如果用户来自域 testx.com,则将 url 重写为 mydomain.com/testx
- flutter - BoxFit.cover 不适用于 CachedNetworkImage 和 PhotoView