提交时的 JavaScript 单选按钮

标签 javascript forms radio-button form-submit

所以我是 JavaScript 新手。我正在尝试创建一个简单的代码,允许用户选择 binaryhexoct 并将十进制数转换为所选的单选按钮。现在我并不担心此时的转换,我只是想在点击提交后让代码运行一个函数。例如,如果选择了单选按钮“二进制”,则单击“提交”按钮后,页面上应该显示“已选择二进制”。

我真的不知道如何让它发挥作用,也不知道该去哪里寻找。我不断更改我的代码,当您选择它生成“选定对象”的按钮时,它就可以工作,但我希望它仅在按下提交按钮后生成。不确定我是否必须对提交按钮或表单标签进行编码。我当前的非工作代码如下:

<!DOCTYPE html>
<html>
	<head>
		<script>


		function convertit()
		{
			
			var conversion = document.getElementsByName('convert');


			if (conversion[0].checked == true) 
			{
				document.getElementById('test').innerHTML = "Binary Checked";
			}


			else if (conversion[1].checked == true) 	
			{
				document.getElementById('test').innerHTML = " Hex Checked";
			}

			else if (conversion[2].checked == true) 	
			{
				document.getElementById('test').innerHTML = "Oct Checked";
			}

 			else
			{
				alert("Empty");
			}
			return true;
		}

	

	


		</script>
	</head>




	<body>

		<p id="test"> </p>

		<form onsubmit="return convertit();">
			<input type="radio" value="binary" name="convert" id="binarybut"  >
				 Binary 
			</input>

			<input type="radio" value="binary" name="convert" id="hexbut" >
				 Hex
			</input>

			<input type="radio" value="hex" name="convert" id="octbut"> 
				Oct
			</input>

			<input type="submit" value="Convert Number" > 


		</form>





</body>
</html>

最佳答案

您的 Javascript 无法找到您的输出元素,因为它尚未声明。

如果您将 < script >...</script> 放在正文的末尾,它应该可以正常工作。

例如:

...
< /script>
< /body>

Here's a working fiddle

关于提交时的 JavaScript 单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41113298/

相关文章:

javascript - WebStorm 对 ExtJ 的支持

javascript - JS - 动态 Href 更改

javascript - 验证不是一个函数

javascript - 选择单选按钮时如何清除文本字段内的文本

javascript - 3 秒后的下一张图片

javascript - 为什么这个匹配返回两个结果,而只有一个结果存在

javascript - 使用不同的变量调用递归函数

html - 底部附加按钮与 div 大小不匹配

jquery - 显示由单选按钮触发的可选输入字段

python - 获取python中单选按钮的 "id"值