提交的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單選按鈕

回答

相關問題