gpt4 book ai didi

Javascript 基本单选按钮警报

转载 作者:行者123 更新时间:2023-12-03 09:27:16 24 4
gpt4 key购买 nike

所以我试图创建一个带有单选按钮的测试页面,该按钮使用 onclick 来注册要在页面上显示的警报,但我无法让它与我当前的代码一起工作...我正在遵循一本书中的教程所以我改变了一些东西,但不明白为什么它不起作用。

<!DOCTYPE html>
<!-- radio_click.html
A document for radio_click.js
Creates five radio buttons that call the
colorChoice event handler to display desccriptions
-->
<html lang="en">
<head>
<title> radio_click.html</title>
<meta charset="utf-8" />
<script type="text/javascript" src="radio_click.js">
</script>
</head>
<body>
<h4> Choose from the five colors </h4>
<form id="myForm" action=" ">
<p>
<label><input type="radio" name="colorbutton" value="1" onclick="colorChoice(1)"/>Red</label>
</br>
<label><input type="radio" name="colorbutton" value="2" onclick="colorChoice(2)"/>Blue</label>
</br>
<label><input type="radio" name="colorbutton" value="3" onclick="colorChoice(3)"/>Green</label>
</br>
<label><input type="radio" name="colorbutton" value="4" onclick="colorChoice(4)"/>Yellow</label>
</br>
<label><input type="radio" name="colorbutton" value="5" onclick="colorChoice(5)"/>Orange</label>
</p>
</form>
<!-- script for registering event handlers -->
<script type = "text/javascript" src="radio_clickr.js">
</script>
</body>
</html>

JavaScript 文件(1)

// radio_click.js
// An example of the use of the click event with radio buttons,
// registering the event handler by assignment to the button attributes

// the event handler for a radio button collection
function colorChoice(color){
// put the DOm address of the elements array in a local variable
var dom = document.getElementById("myForm");

// determine which button was pressed
for(var index = 0; index < dom.colorButton.length; index++){
if(dom.colorButton[index].checked){
color = dom.colorButton[index].value;
break;
}
}

//Produce an alert message about the chosen airplane
switch(color){
case 1:
alert("Roses are red...");
break;
case 2:
alert("Violets are blue...");
break;
case 3:
alert("Green doesn't fit in this...");
break;
case 4:
alert("Yellow for lemon");
break;
case 5:
alert("What rhymes with orange?");
break;
default:
alert("Welp, that didn't work");
break;
}
}

以及下面的 javascript 文件(2)

// radio_clickr.js
// the event registering code for radio_click
var dom= document.getElementById("myForm");
dom.elements[0].onclick = colorChoice;
dom.elements[1].onclick = colorChoice;
dom.elements[2].onclick = colorChoice;
dom.elements[3].onclick = colorChoice;
dom.elements[4].onclick = colorChoice;

所有文件都位于同一个文件夹中,也许我的位置路径错误?

最佳答案

您的代码中需要进行一些更改。

  • colorButton 对象未定义
  • 将 switch case 值从数字更改为字符串。

下面是修改后的代码。仅更改了 colorChoice 函数。

function colorChoice(color){
// put the DOm address of the elements array in a local variable
var dom = document.getElementById("myForm");
var colorButton = document.getElementsByName("colorbutton");

// determine which button was pressed
for(var index = 0; index < colorButton.length; index++){

if(colorButton[index].checked){
color = colorButton[index].value;
break;
}
}

//Produce an alert message about the chosen airplane
switch(color){
case '1':
alert("Roses are red...");
break;
case '2':
alert("Violets are blue...");
break;
case '3':
alert("Green doesn't fit in this...");
break;
case '4':
alert("Yellow for lemon");
break;
case '5':
alert("What rhymes with orange?");
break;
default:
alert("Welp, that didn't work");
break;
}
}

关于Javascript 基本单选按钮警报,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31631122/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com