人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptの基本だと思うのですが、煮詰まってしまいました。例のようにForm内に複数あるラジオボタンの状態を取得、設定したいのです。

<script type="text/javascript"><!--
function changeBtn(){
switch (document.myForm.getElementById("btn1").valeu){
case 0:
document.myForm.getElementById("btn1").valeu="1";
break;
case 1:
document.myForm.getElementById("btn1").valeu="2";
break;
}
}
// --></script>
<FORM name="myForm">
<P>
<INPUT type="radio" checked name="btn1" value="0">
<INPUT type="radio" name="btn1" value="1">
<INPUT type="radio" name="btn1" value="2">
<INPUT type="button" name="ninjahenkou" value="変更" onClick="changeBtn()">
</P>
としてみましたが、これでは文法エラーになります。DOMによる正しい書き方を教えてください。







●質問者: mouitchou
●カテゴリ:インターネット ウェブ制作
✍キーワード:CASE JavaScript switch エラー ラジオボタン
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● KUROX
●27ポイント

動作確認はXP SP2/IE6で行いました。

・getElementByIdの使い方が違う

・valeuのつづりがvalue

・Case ところは'0'のように括らないと駄目

以下のように書き直してみましたが、2回目以降の動作が

おかしいようです。alertはデバッグ目的で入れてます。

<script type="text/javascript">

<!--

function changeBtn(){

switch (document.getElementById("btn1").value){

case '0':

document.getElementById("btn1").value='1';

alert(document.getElementById("btn1").value);

break;

case '1':

document.getElementById("btn1").value='2';

alert(document.getElementById("btn1").value);

break;

}

}

// -->

</script>

<FORM name="myForm">

<P>

<INPUT type="radio" checked name="btn1" value="0">

<INPUT type="radio" name="btn1" value="1">

<INPUT type="radio" name="btn1" value="2">

<INPUT type="button" name="ninjahenkou" value="変更" onClick="changeBtn()">

</P>

で、処理内容を見るだけだと、Javascript必要ないのでは?

この処理で駄目なら、Javascriptをもう少しみてみますが・・。

<FORM name="myForm">

<P>

<INPUT type="radio" checked name="btn1" value="1">

<INPUT type="radio" name="btn1" value="2">

<INPUT type="radio" name="btn1" value="2">

<INPUT type="button" name="ninjahenkou" value="変更" onClick="changeBtn()">

</P>


http://q.hatena.ne.jp/answer

◎質問者からの返答

じつは値をひとつ取得・設定できれば、何十個並べても同じパターンでできるだろうと、1セットだけ書いて質問しました。その際、スペルミスしてしまいました。

まるまるコピーペーストしましたが、結果は2回だけalert(1と2)が出て、あとは無反応になりました。また、ラジオボタンのチェックが1へも2へも移動しませんでした。getElementByIdが1?2回だけ効いているのが不思議です。


2 ● Yota
●27ポイント

<html>

<head>

<script type="text/javascript">

function changeBtn(){

var val = '' ;

for(var i = 0 ; i < document.myForm.btn1.length ; i++) {

if(document.myForm.btn1[i].checked) {

val = document.myForm.btn1[i].value ;

}

}

//alert(val) ;

switch (val){

case '0': document.myForm.btn1[1].checked = true ; break;

case '1': document.myForm.btn1[2].checked = true ; break;

}

}

</script>

</head>

<body>

<form name="myForm">

<p>

<input type="radio" name="btn1" value="0" checked="checked"/>

<input type="radio" name="btn1" value="1" />

<input type="radio" name="btn1" value="2" />

<input type="button" name="ninjahenkou" value="変更" onClick="changeBtn()" />

</p>

</form>

</body>

</html>

http://dummy.com/

◎質問者からの返答

ありがとうございます。

これだと、たしかに目的の動作をさせることができました。

ただ、できましたらgetElementByIdとかgetElementsByNameとかを使ってやりたいのです。縦にたくさん同様なボタンのセットを表示するつもりなので、その方が、PHP内で色々汎用性をもたせられそうな気がするものですから。

さらにいえば、いずれ(二次元)配列をこれに組み合わせたいと希望しています。


3 ● Yota
●26ポイント

むりやりDOMらしくすると、こんなかんじでしょうか。

<html>

<head>

<script type="text/javascript">

function changeBtn(){

var val = '' ;

var radioAry = document.getElementsByTagName('input') ;

for(var i = 0 ; i < radioAry.length - 1 ; i++) {

if(radioAry[i].checked) {

val = radioAry[i].value ;

}

}

//alert(val) ;

switch (val){

case '0': document.getElementById('bt1').checked = true ; break;

case '1': document.getElementById('bt2').checked = true ; break;

}

}

</script>

</head>

<body>

<form name="myForm" id="myFrom">

<p>

<input type="radio" name="btn1" id="bt0" value="0" checked="checked"/>

<input type="radio" name="btn1" id="bt1" value="1" />

<input type="radio" name="btn1" id="bt2" value="2" />

<input type="button" name="ninjahenkou" value="変更" onClick="changeBtn()" />

</p>

</form>

</body>

</html>

http://dummy.com/

◎質問者からの返答

目的通り、値の取得と設定ができます。

どうやらnameを同じに、idを異なるものにすることと、プロパティをcheckedにすることが

ポイントなのですね。

これでしばらく進めてみます。どうもありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ