提交的JavaScript单选按钮

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

我真的失去了如何让这个工作，并不知道在哪里看。我一直在更改我的代码，当它选择它生成“对象选定”按钮时，它就起作用了，但我希望它在按下提交按钮后才生成。不确定是否必须编写提交按钮或表单标签。我现在，非工作代码如下：

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script> 
 

 

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

 

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

 

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

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

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

 
\t 
 

 
\t 
 

 

 
\t \t </script> 
 
\t </head> 
 

 

 

 

 
\t <body> 
 

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

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

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

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

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

 

 
\t \t </form> 
 

 

 

 

 

 
</body> 
 
</html>

来源

2016-12-13 FckItsChey

你的代码是好的，只是从处理程序返回'FALSE'使默认表单提交将被阻止。您的表单正在被提交，导致页面刷新，因此它将进入默认状态 –

请参阅https://jsfiddle.net/arunpjohny/tm1aoukx/1/ –

非常感谢！很高兴这是一个简单的解决方法，我一整天都在疯狂地试图让它工作。谢谢！！！有效！ – FckItsChey

你的JavaScript无法找到输出元素，因为它尚未宣布。

如果您将<脚本> ... </script>放在主体的末尾，它应该可以正常工作。

如：

... 
< /script> 
< /body>

Here's a working fiddle

来源

2016-12-13 03:37:09 Frontendstrong

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script> 
 

 
\t \t function convertit() 
 
\t \t { 
 
\t \t \t 
 
\t \t \t if (document.getElementById('binarybut').checked) 
 
\t \t \t { 
 
           alert("Binary Checked"); 
 
\t \t \t } 
 

 

 
\t \t \t else if (document.getElementById('hexbut').checked) \t 
 
\t \t \t { 
 
\t \t \t   alert("Hexadecimal Checked"); 
 
\t \t \t } 
 

 
\t \t \t else if (document.getElementById('octbut').checked) \t 
 
\t \t \t { 
 
           alert("Octal Checked"); 
 
\t \t \t } 
 

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

 
\t \t </script> 
 
\t </head> 
 
\t <body> 
 

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

 
\t \t <form> 
 
\t \t \t <input type="radio" value="binary" name="convert" id="binarybut" > 
 
\t \t \t \t Binary 
 
\t \t \t </input> 
 

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

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

 
\t \t \t <button type="button" onclick="convertit()">Convert</button> 
 

 

 
\t \t </form> 
 
</body> 
 
</html>

来源

2016-12-13 04:49:55

@ssheatler给这个答案你的问题你可以运行代码，并尝试CSS完成功能后可以完成 –

任何运气这是你需要的权利@ssheatler –

提交的JavaScript单选按钮

回答

相关问题