2016-12-13 8 views
0

私はJavaScriptを初めて使用しています。人がbinary,hex、またはoctを選択し、選択したラジオボタンに10進数を変換できるようにする簡単なコードを作成しようとしています。今、私はこの時点で変換について心配していません、私はちょうど私が提出した後に関数を実行するコードを取得しようとしています。たとえば、ラジオボタンのバイナリが選択されている場合、送信ボタンがクリックされると、そのページで「バイナリが選択されました」と表示されます。送信時の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>

+0

あなたのコードは結構です、既定のフォーム送信するように、ちょうどハンドラから 'false'のを返すが防止されます。フォームが送信され、ページがリフレッシュされてデフォルト状態になる –

+0

https://jsfiddle.net/arunpjohny/tm1aoukx/1/を参照してください。 –

+0

ありがとうございました!だからこそ、それは簡単な修正だったので、私は一日中夢中になって仕事をしようとしています。ありがとうございました!!!出来た! – FckItsChey

答えて

0

使いのブラウザではJavaScriptがお使いの出力要素を見つけることができません。

<スクリプト> ... </script>を本文の末尾に置くとうまくいくはずです。

例:

... 
< /script> 
< /body> 

Here's a working fiddle

0

<!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>

+0

@ssheatlerこれはあなたの質問に答えています。コードを実行して、後でCSSを実行してみてください。機能が完了したら後で実行できます –

+0

これはあなたが必要としているものです@ssheatler –

関連する問題