- 締切済み
フォームボタンの値を変更したい
"document." + result + ".inp.value=解除"; resultは変数です。 実行したいのですが、実行方法がわからずテキストが書き換わってくれません。 それとその時にそのフォームのonclickの値も変えたいのですが書き方がわからないのです。 javascriptもhtmlも初心者です。 よろしくお願いします。 hii_can
- hii_can
- お礼率83% (5/6)
- JavaScript
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
No.4です。 結局、なさりたいことがよくわかりませんが… ひょっとしてこんなこと？ （よくわからないので、適当です。また、方法はNo.3と異なりますが、悪しからず。） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- ul#store, ul#store li { list-style-type:none; margin:0; padding:0; } ul#store li { width:150px; margin:10px 2px; float:left; text-align:center; } ul#store div.goods { width:150px; height:100px; border:1px solid #ccc; } //--> </style> </head> <body> <ul id="store"> <li><div id="goods001" class="goods">goods No1</div> <input type="button" value="選択"></li> <li><div id="goods002" class="goods">goods No2</div> <input type="button" value="選択"></li> <li><div id="goods003" class="goods">goods No3</div> <input type="button" value="選択"></li> <li><div id="goods004" class="goods">goods No4</div> <input type="button" value="選択"></li> <li><div id="goods005" class="goods">goods No5</div> <input type="button" value="選択"></li> <li><div id="goods006" class="goods">goods No6</div> <input type="button" value="選択"></li> <li><div id="goods007" class="goods">goods No7</div> <input type="button" value="選択"></li> <li><div id="goods008" class="goods">goods No8</div> <input type="button" value="選択"></li> <li><div id="goods009" class="goods">goods No9</div> <input type="button" value="選択"></li> <li><div id="goods010" class="goods">goods No10</div> <input type="button" value="選択"></li> </ul> <div style="clear:left; margin-top:50px;"> <h3>変数aryの内容</h3> <p id="disp">なし</p> </div> <script type="text/javascript"> <!-- (function(){ var ary = []; function hoge(evt){ var t = evt.target || evt.srcElement; if(t.nodeName!="INPUT" || t.type!="button") return; var flag = t.value=="選択"; var goods = t.previousSibling; while(goods && goods.className!="goods") goods = goods.previousSibling; t.value = flag?"削除":"選択"; goods.style.color = flag?"#f00":"#000"; var id = goods.id; if(flag) ary[ary.length] = id; else for(var i=ary.length; i>0;) if(ary[--i]==id) ary.splice(i, 1); dispAry(); } function dispAry(){ var r = ary.length?"":"なし"; for(var i=0; i<ary.length; i++) r += (r?", ":"") + ary[i]; document.getElementById("disp").innerHTML = r; } /*@cc_on@*/ document.getElementById("store")./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/ 'click', hoge, false); })(); //--> </script> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
No.3です。 ＞このボタンが1画面で20個あるのです。。。 ＞ボタン1個単位で制御しなくてはならないのでidを指定したいのです 抽象的な質問だと、具体的なコードの回答は作成できないので、考え方のサンプルとして示したものです。（文章だけではわからないかと思ったので） No.3のコードで、idを指定する処理を記述しても特に問題はないはずです。たまたま、サンプルのコードを実行するのにはidが不要だっただけです。（というか、不要なidは作成しない方が、後々のメンテナンスなどが簡単になる可能性が高いです） ボタンが20個あっても、処理は同じではないかと推測しますが、それぞれ違う種類の処理を行なうボタンなのでしょうか？ もちろん操作の対象は異なるでしょうけれど、相対的な位置関係が同じなどであれば、共通した処理として記述できそうな気がしますが… お礼の文章を読んでも、 ＞1画面で20個あるのです と ＞選択と解除を一つのボタンで制御したい とあるので、対象とするボタンが20個あるのか1個なのかすら私にはわかりません。 ボタンが他に19個あっても、「選択と解除を操作する」ボタンが1つだけなら、残りの19個は関係ないのでは？
- fujillin
- ベストアンサー率61% (1594/2576)
横からですが… ひとつのボタンのクリック動作で、異なる処理を交互に実行させたいという解釈でよいのでしょうか？ もしそうであるならば、イベント（この場合はclick）の設定を変更するという方法もなくはないですが、そのようなことをしなくても、イベントの処理側で二つの処理を交互に行なうという考え方もあります。（というよりこちらの方が一般的？） 解釈が間違っていたら、スルーしてください。 （ボタンの表示を変えるのは、それぞれの処理の中で行なってください） ＜そのような例＞ （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- var hoge = (function(){ var flag = false; return function(){ flag = !flag; if(flag){ alert("処理Ａ"); } else { alert("処理Ｂ"); } } })(); //--> </script> </head> <body> <div> <input type="button" value="test_toggle" onclick="hoge()"> </div> </body> </html>
お礼
fujillin様ありがとうございます。 このボタンが1画面で20個あるのです。。。 ボタン1個単位で制御しなくてはならないのでidを指定したいのです。 ショッピングカート的なもので、1^ページに20商品あるあり、選択と解除を一つのボタンで制御したいのです。 拙い説明で何度もすみません。 何卒よろしくお願いします
- yambejp
- ベストアンサー率51% (3827/7415)
>inpボタンのonclickの値変更はどのように指定 inpがボタンなのかサブミットなのかによって若干異なります 単純にボタンなら function hoge(){ ・・・; } document.getElementById(resultID).elements['inp'].onclick=hoge; のようなやり方になるでしょうか？ 複雑なことをやりたい場合は、addEventListenerやattachEventを使うことに なると思います。 具体的にどういう動作をどういう動作に変えたいかなどを示した方がいいと思います。 （たとえばサブミットでactionを変えるだけなら書き方が全然ちがうし）
お礼
yambejp様レスありがとうございます。 単純にそのボタンとonclick時のjsを切り替えたいのです。 初心者な質問だと思うのですが、jsでボタンのテキストやonclickの値を変更するとボタンがトグルになりクリックすると別のjsを実行するようにしたいのです。 ここで疑問なのですが画面ではボタンのテキストが変わっているのに、ブラウザーからhtmlを見ると以前のままのコードになっているのです。これって正しい動きなのでしょうか？ わかりにくくてすみません。 hii_can
- yambejp
- ベストアンサー率51% (3827/7415)
ごめんなさい、意味がよくわからないのですが resultはフォームということですかねぇ？ idをふっているなら document.getElementById(resultID).elements['inp'].value='解除'; みたいな処理になるかと
お礼
yambejp様ありがどうございます。resultIDの所を変数名のresultにするとできました。 すみませんinpボタンのonclickの値変更はどのように指定すればよいでしょうか？ よろしくお願いします。 hii_can
補足
yambejp様ありがどうございます。resultIDの所を変数名のresultにするとできました。 すみませんinpボタンのonclickの値変更はどのように指定すればよいでしょうか？ よろしくお願いします。 ※まだOKWaveの使い方がよくわからず、、補足入力に入力していますが違いますでしょうか（とほほほっ）
お礼
fujillin様ありがとうございます。 私の説明能力と理解能力が低くてすみません。ボタンは20個同じように動作するものです。ショッピングカート機能ですね。選択を選ぶとArrayにIDが入り、解除を選ぶとArrayから削除されるというものを作成したいのです。。。サンプルコードを見てもう少し理解できるように勉強しますです。 hii_can