JavaScriptのgetElementById以降の記述はどうする?

このQ&Aのポイント
  • ボタンをクリックすると表示内容とボタン色を変える、JavaScriptの書き換え方法
  • ボタンの代わりに画像を使用し、クリックした時に別の画像に入れ替える方法
  • 説明不足の点があれば補足する
回答を見る
  • ベストアンサー

JavaScriptのgetElementById以降の記述?

ボタンをクリックすると表示内容とボタン色を変える、というJavaScriptを書き換えているところなのですが、 わからないことがあるので宜しくお願いします。 ※ボタンにはid名(id="tab0"、id="tab1"、id="tab2"、…といったふうに)が付けてあります。 ------------------------------------------------------------ 参考にしている書き換え前のJavaScriptの一部 ------------------------------------------------------------ function changeTab(n) { if ( n != tabNum && document.getElementById("tab"+n+"_content") ) { document.getElementById("tab"+tabNum).style.backgroundColor="#666"; document.getElementById("tab"+tabNum+"_content").style.display = "none"; document.getElementById("tab"+n).style.backgroundColor="#fff"; document.getElementById("tab"+n+"_content").style.display = "block"; tabNum = n; }} ------------------------------------------------------------ ボタン(<button type="button" id="tab0">)の代わりに 画像(<input type="image" id="tab0" src="xxx.gif">)にしたので、 クリックしたときに画像を別の画像に入れ替えるようにしたいのです。 「style.backgroundColor="#fff";」の部分を書き換えれば良いと思うのですが…。 説明不足の点などありましたら補足しますので宜しくお願いします。

noname#9774
noname#9774

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

基本的には、おっしゃる通り document.getElementById("tab"+n).style.backgroundColor="#fff"; を document.getElementById("tab"+n).src = "zzz.gif"; のようにすればよいと思うのですが...。

noname#9774
質問者

お礼

できました! gif画像のnを取得するための書き方が間違っていてエラーになったようです…。 最近JavaScriptをいじり始めたばかりなので自信がなく、何か根本的に間違っているのかも…?と思ってしまって…。 おかげさまで無事解決しました。 ありがとうございました。

関連するQ&A

  • Javascriptを短くしたい

    初歩的なことですみません。 Javascriptで表示/非表示を切り替えるものを作ろうと思うのですが、 以下のサンプル文のような形では、項目数が増えるとその分だけ どんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。 よろしくお願いします。 <script type="text/javascript"> <!-- function Hyo1(num) { if (num == 0) { document.getElementById("cont1").style.display="block"; } else { document.getElementById("cont1").style.display="none"; } } function Hyo2(num) { if (num == 0) { document.getElementById("cont2").style.display="block"; } else { document.getElementById("cont2").style.display="none"; } } // --> </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>

  • これってJavaScriptですか??

    以下のソースはJavaScriptになりますか? HPを(初心者ながら)作っているのですが JavaScriptを使うとパソコンのブラウザなどによっては違うように見えると聞きました。 以下のソースがJavaScriptなら、どのへんがどんな風に違って見えるのでしょうか? <table cellspacing="0" cellpadding="0" style="width:250px;font-size:13px;color:#000"><tbody><tr style="text-align:center"><td style="border-width:1px 1px 0 1px;border-style:solid;border-color:#000"><div style="background:#ffcccc;border-bottom:1px solid #ffcccc;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME1" onclick="document.getElementById('NAME4').style.backgroundColor='#ffcccc';document.getElementById('NAME1').style.borderColor='#ffcccc';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME11').innerHTML"> タブ1 </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ff6699;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME2" onclick="document.getElementById('NAME4').style.backgroundColor='#ff6699';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#ff6699';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME22').innerHTML"> タブ2 </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ffeeee;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME3" onclick="document.getElementById('NAME4').style.backgroundColor='#ffeeee';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#ffeeee';document.getElementById('NAME4').innerHTML=document.getElementById('NAME33').innerHTML"> タブ3 </div></td><td style="width:100%;border-bottom:1px solid #000">&nbsp;</td></tr><tr><td colspan="4"><div style="border-width:0 1px 1px 1px;border-style:solid;border-color:#000;background:#ffcccc;padding:10px;height:130px" id="NAME4"> ここにタブ1の文章 </div></td></tr></tbody></table> <div style="display:none" id="NAME11"> ここにもタブ1の文章 </div><div style="display:none" id="NAME22"> ここにタブ2の文章 </div><div style="display:none" id="NAME33"> ここにタブ3の文章 </div>

  • クリックして画像を表示JavaScriptについて

    友人がJavaScriptに苦戦しています。 ボタンをクリックすると、画像が表示されるプログラムを作りたいそうです。以下、送られて来たコードです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box"><!--attr (DOMのsetAttributeと同じ)--> <script> addEventListener("load",()=>{ document.getElementById("btn").addEventListener("click",()=>{ //$("img").attr("src","./image.jpg"); document.getElementById("aa").style.color = "white"; document.getElementById("img").style.backgroundImage = "./image.jpg"; }); }); </script> <button id="btn">ここをクリックで画像表示</button> <p id="aa">aa</p> <img id="img"> </div> </body> </html> なぜかボタンをクリックしても、画像が表示されません。なぜなのでしょうか?教えて頂きたく思います。

  • document.getElementById( ).style.displayについて

    「document.getElementById( ).style.display」を使って スタイルシートを書き換え、画像とテキストの表示替えをしています。 Firefoxでは正常に動作するのですが、 IEでは「displayプロパティ」を取得できずに動作しません。 htmlは以下のとおりです。 どなたかお分かりになる方、教えていただけないでしょうか? よろしくお願いします。 ★javascriptの内容 function toggle(Aid,Bid,Cid,Did,Eid) { document.getElementById(Aid).style.display = 'none'; document.getElementById(Bid).style.display = 'inherit'; document.getElementById(Cid).style.display = 'inherit'; document.getElementById(Did).style.display = 'none'; document.getElementById(Eid).style.display = 'none'; } ★スタイルシートの内容 #page {width: 910px;} #ai{height: 33px;display:inherit;} #kaki{ height: 33px;display:none;} #img_ai{margin: 0px;float: left;display:none;} #img_kaki{margin: 0px;float: left;display:inherit;}

  • javascriptの予約語について

    環境 win8 64bit ブラウザ30.0.1599.69 m Firefox24 IE10 javascriptの勉強を始めたばかりなのですが、「click」という名前は予約語なのでしょうか? ボタンを押したら背景色が変わるコードを書いてみたのですが関数名をclickにすると機能しません。 別の名前(testclick1等)に変更すると機能するようになるのでclickが予約語なのかと思うのですが、 いろいろと調べてみたのですがいまひとつわかりません。 予約語一覧には載っていません http://msdn.microsoft.com/ja-jp/library/ie/0779sbks(v=vs.94).aspx ###################################################### <html> <title></title> <body> <div id="sample">sample</div> <script type="text/javascript"> function click() { e = document.getElementById("sample"); e.style.backgroundColor = 'red'; } function testclick2() { e = document.getElementById("sample"); e.style.backgroundColor = 'blue'; } function testclick3() { e = document.getElementById("sample"); e.style.backgroundColor = 'yellow'; } </script> <hr> <button onclick="click()">Change to Red</button> <button onclick="testclick2()">Change to Blue</button> <button onclick="testclick3()">Change to Yellow</button> </body> </html> ###################################################### ネット上に出回っているjavascriptのコードでは普通にclickという名前が使われています。 下記のyoutube動画内でも使われています。 同様のものを私の環境でも書いてみましたがやはり機能しませんでした。 (clickを別の名前にすると動きます) http://www.youtube.com/watch?v=5e40QHi-vUg これはいったいどういうことなのでしょうか? 理由をご存の方教えてください。

  • Javascriptで質問です2

    セレクトボックスから選択してテキストや画像を出力する以下のコードがあるのですが、これをセレクトボックスを2段階で選択後にテキストや画像を出力したいのです。 詳しい方がいらっしゃれば、ご教示いただければ幸いです。よろしくお願いいたします。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5" style="display:none;"> <p>two</p> </div> <div id="Box3" class="my-5" style="display:none;"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>

  • dreamweavercs6のショートカット等

    例えば document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none';                ↓  document.getElementById('tab10').style.display = 'none'; という記述があったとします。 この場合、tab5~tab10までいちいちコピーペーストでやるのが大変面倒です。 何か良いショートカット、機能はないのでしょうか?

  • javascript aタグ内の記述について

    javascriptのaタグ内の記述について質問です。 まず、gallery.htmlというページ内で、下記のような記述をして表示の切り替えを実装しています。 ■HTML内 <a href="javascript:SwitchTopic(01);">画像一覧</a> ■js内 function SwitchTopic(num) { var num; if(num == 01){ document.getElementById("topic01").style.display = 'block'; //これだけ表示 document.getElementById("topic02").style.display = 'none'; } } これを、他のページからgallery.htmlへリンクを飛ばしたときに SwitchTopicで表示を切り替えた部分に飛ばしたいのですが <a href="../../gallery.html">  ↑このaタグ内で一緒に javascript:SwitchTopic(01)の実装ができるものでしょうか? gallery.htmlに飛ばすことはできても、切り替えた部分に飛ばすことができず行き詰っております… あまりjavascriptの知識がないため、記述の仕方をご教授いただければ助かります。 よろしくお願いいたします。

  • javascriptでタブ。曜日ごとに切り替える方法がわかりません。

    javascript初心者です。 javascriptでタブを作って曜日ごとに自動で切り替わるようにしたいのです。一生懸命考えてるのですがうまくいきません。 タブの作成はうまくいきました。以下がタブです。 function WeekTab( week ) { var i; for( i=0; i < 7; i++ ) { document.getElementById('week' + i ).style.display = 'none'; } document.getElementById('week' + week ).style.display = 'inline'; } --> ~~BODY~~~~~ <table class="week-tab"> <tr> <th onClick="WeekTab(0)" id="week_tab0">日曜</th> <th onClick="WeekTab(1)" id="week_tab1">月曜</th> <th onClick="WeekTab(2)" id="week_tab2">火曜</th> <th onClick="WeekTab(3)" id="week_tab3">水曜</th> <th onClick="WeekTab(4)" id="week_tab4">木曜</th> <th onClick="WeekTab(5)" id="week_tab5">金曜</th> <th onClick="WeekTab(6)" id="week_tab6">土曜</th> </tr> </table> <div id="week0" style="display:none;"> <h3>日曜</h3> </div>以下省略・・ このタブに曜日ごとに自動で切り替わるようにしたいのです。 どうか力を貸してくださいよろしくお願いします

  • Javascriptによるフォームの選択表示について教えてください。

    Javascriptによるフォームの選択表示について教えてください。 概要としてはカートCGIのお客様情報入力欄のカスタマイズを行なっています。 別の場所への発送を希望される場合において(1)、(2)、(3)のラジオボタンを作り、それぞれ選択によって該当のフォームを表示するところまではできました。 問題は、(1)→1箇所、(2)→3箇所、(3)→5箇所とフォームを作ったところ、入力ページが表示された時点で(1)(2)(3)全ての表示がされた状態で表示されます。 ちなみに、その際にラジオボタンを選択すると(1)(2)(3)それぞれに対応したフォームが表示され切り替わります。 実際にやりたいことは、ページが表示された時点で(1)のフォームのみ表示されるようにし、(2)(3)とラジオボタンを選択された際にそこで初めて(2)(3)のそれぞれのフォームを表示したいと思っています。 以下はソースです。 ■Javascript <script type="text/javascript"> function func1() { document.getElementById("sele1").style.display="inline"; document.getElementById("sele1").disabled=false; document.getElementById("sele2").style.display="none"; document.getElementById("sele2").disabled=true; document.getElementById("sele3").style.display="none"; document.getElementById("sele3").disabled=true; } function func2() { document.getElementById("sele1").style.display="none"; document.getElementById("sele1").disabled=true; document.getElementById("sele2").style.display="inline"; document.getElementById("sele2").disabled=false; document.getElementById("sele3").style.display="none"; document.getElementById("sele3").disabled=true; } function func3() { document.getElementById("sele1").style.display="none"; document.getElementById("sele1").disabled=true; document.getElementById("sele2").style.display="none"; document.getElementById("sele2").disabled=true; document.getElementById("sele3").style.display="inline"; document.getElementById("sele3").disabled=false; } </script> ■CGI(HTML)側 <form action="xxx"> <table border=0 cellpadding=5 cellspacing=2 width=500> <p>発送先が2箇所以上の場合はこちらから選択ください。 <input type="radio" value="1" onclick="func1('block')" />1箇所</label> <input type="radio" value="2" onclick="func2('none')" />2箇所</label> <input type="radio" value="3" onclick="func3('none')" />5箇所</label> </p> </table> <table id="sele1"> </table> <table id="sele2"> </table> <table id="sele3"> </table> </form> table内容は省略しています。 説明が下手ですがどうかご教授ください。宜しくお願いします。

専門家に質問してみよう