getElementByIdがラジオボタンでうまく動作しない

getElementByIdが値を取得したい場合、またはチェックされているかどうかを調べたい場合、getElementByIdがラジオボタンで機能しないと推測していますか？私はこれをした選択された一つの値を取得するにはgetElementByIdがラジオボタンでうまく動作しない

<input id="radio1" type="radio" name="group1" value="h264" checked="checked" /> 
<input id="radio2" type="radio" name="group1" value="flv" />

：

function getRadioValue() { 

    if(document.getElementById('radio1').value=='h264'){ 
     return 'h264'; 
    } 
    else{ 
     return 'flv'; 
    } 

}

をしかし、放火犯は私に言って続けて：

document.getElementById("radio1") is null 
[Break on this error] if(document.getElementById('radio1').checked==true){

何午前私はこれをしなかったので、これは言います私は間違っている？

おかげで、すべての

出典

2009-07-04 Abs

小先端のために正常に動作するように見えた：あなたはXHTMLingているように見えるので、（クローズ・スラッシュで推論されます）、check = "checked"をチェックしてください。 – Domenic

良い点、ありがとう。とんでもないJavaScriptとxHTML。 :) – Abs

他の何かが間違っている必要があります。あなたのコードは動作するはずです –

文書がロードされた後は、document.getElementByIdを呼び出す必要があります。

window.onload = function() { 
    alert(getRadioValue()); 
}

出典

2009-07-04 17:13:24 Fernando

はい。これはうまくいった。しかし、私はページロード後少なくとも5秒待つが、それは私にヌルを与える?? – Abs

最初に最も近い正解がどこにあるかを選んでください。もう一度皆にお詫び申し上げます。 – Abs

これはあなたの要素がまだロードされていないためです。あなたは大きな文書を持っていますか、またはxmlhttprequest経由でサーバーからコンテンツを取得していますか？ – Fernando

これは自分のマシンで動作します。次のような最小限の例を試してみましたか？

<html> 
    <form> 
     <input id="radio1" type="radio" name="group1" value="h264" checked="checked" /> 
     <input id="radio2" type="radio" name="group1" value="flv" /> 
    </form> 
    <script type="text/javascript"> 
     alert(document.getElementById("radio1")); 
    </script> 
</html>

私は、radio1要素が作成されて参照するまで待たずにいると思います。 DOMContentLoadedまたはloadイベントを使用してください。

出典

2009-07-04 17:13:56 Domenic

あなたはどれくらい待つ必要がありますか？私はページが読み込まれてから5秒待ってから1分ほど待った。確かにそれは速くすべきですか？ – Abs

これは文書によって異なります。そのため、私が参照したイベントを使用する必要があります。彼らはできるだけ早くあなたの機能を実行しますが、すぐには機能しません。（それらの違いは、DOMContentLoadedは画像を待たずに、例えば自分自身を埋めることですが、ロードイベントはそうです）。 – Domenic

他の人が指摘しているように、コードをロード/準備完了イベントに入れなければなりません。

また、コードでは 'h264'が返されますが、チェックされた属性をチェックする必要があります。

どのボタンが選択されているかを調べるには、ラジオボタンを反復処理する必要があります。

function getRadioValue() 
{ 
    var radio1 = document.getElementById('radio1'); 
    var radio2 = document.getElementById('radio2'); 

    //You sould not hard code the value of HTML radio button in your code. 
    //If you change value in HTML code, you will have to modify your JS code as well. 
    return radio1.checked ? radio1.value : radio2.value; 
}

また、それは手で、このJavaScriptコードを記述しますがjQueryのようにライブラリを使用しない方が良いという考えになります。あなたのコードは次のように簡単になります：

$("input[name='group1']:checked").val();

出典

2009-07-04 17:19:48 SolutionYogi

私は他のプロジェクトでJQueryを使用していますが、これは非常に小さなプロジェクトです。私はJQueryライブラリのオーバーヘッドがそれに値するとは思わない。 :) – Abs

jQueryライブラリのオーバーヘッド？あなたの頭のセクションに1行追加する以外に、私はオーバーヘッドがあるとは思わない。私はあなたが最初の場所にライブラリを含めることに比べてこの問題をデバッグする時間を無駄にしてしまったと確信しています。私にとっては、たとえサンプルコードを捨てるとしても、jQueryをインクルードします。 – SolutionYogi

ここでは、ラジオボタンを選択する信頼できる機能があります。ラジオボタンがname属性によってグループ化されているので、それは私が常に比較

alert(getRadioVal("group1"));

出典

2009-07-04 21:30:21

...あなたの場合

function getRadioVal(radioName) { 
    var rads = document.getElementsByName(radioName); 

    for(var rad in rads) { 
    if(rads[rad].checked) 
     return rads[rad].value; 
    } 

    return null; 
}

は、あなたがこのようにそれを使うだろう...感覚が getElementsByNameを使用できるようになります私のコードは、iMacrosのFirefoxアドオンによって作成された録音である。参照として非常に便利です！上記

出典

2009-07-04 22:07:39

ジョシュのノートは本当に便利だった、私は、オブジェクトのすべての要素を返す機能を停止して若干の修正をした - これは私

function getRadioVal(radioName) { 
     var rads = document.getElementsByName(radioName); 
     for (var rad=0;rad<=rads.length-1;rad++) { 
     if(rads[rad].checked) { 
      return rads[rad].value; 
     } 
     } 
     return null; 
    } 

    alert(getRadioVal("group1"));

出典

2012-03-16 11:29:04 Steve

getElementByIdがラジオボタンでうまく動作しない

答えて

関連する問題