JavascriptでInputClassの表示を変えるには

2023/10/18 01:40

このQ&Aのポイント

Javascriptを使用して、InputClassの表示を変更する方法について教えてください。
特定のクラス名を持つ要素の表示情報をJavascriptで変更したいです。
動作確認済みのスクリプトがありますので、ご参考までにご確認ください。

ベストアンサー

JavascriptでInputClassの表示を変えるには

2010/03/15 15:05

　以下のScriptを作りました。Tagの表示情報をScriptで変更したいのです。以下のdiv class="inC1"は変更されます。input class="inIPC2も変更したいのですが、どうもやり方が異なるようです。　申し訳ありませんがご教授願います。 <html> <head> <title>エレメントの表示</title> </head> <body> <script type="text/javascript"> function Disp_change() { var i = 0, div = document.getElementsByTagName("DIV"); while (div[i]) { if (div[i].className=="inC1") div[i].innerHTML = "change1"; i++; } } function Disp_change_Class() { var i = 0, div = document.getElementsByTagName("DIV"); while (div[i]) { if (div[i].className=="inIPC2") div[i].innerHTML = "change2"; i++; alert ("change2"); } } </script> <body> <div class="frameHead frameDetail"> <div class="inC1">連絡情報</div> <div class="clear"><hr /></div> <div class="inC2"> <input class="button3" type="button" name="fromUserList" value="" onclick="Disp_change()"> <input class="inIPC2">連絡情報</div> </div> <script type="text/javascript"> Disp_change(); Disp_change_Class(); }; </script> </script> </body> </html> 　一応動きますので確認してみてくだされば幸いです。以上、宜しく御願い致します。

yotarou
お礼率44% (59/133)

Java
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

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

ベストアンサー

0909union
ベストアンサー率39% (325/818)

2010/03/15 16:08 回答No.2

http://msdn.microsoft.com/en-us/library/ms536439(VS.85).aspx https://developer.mozilla.org/ja/Gecko_DOM_Reference http://www.openspc2.org/JavaScript/JavaScript_DOM/ これらのＵＲＬのリファレンスサイトを参考にしてください。一番上からマイクロソフトの公式サイトですので、常に新しいものに更新されます。ＤＯＭレベル３以上のものが定義されているので、必ずしもＩＥ以外のブラウザでの動作は保障されていません。マイクロソフトではＤＨＴＭＬと呼んでいます。ただ、サンプルなど分かりやすいので、ここをみてから一般のサイトをみるとわかりやすいかと。２番目が、ＤＯＭを詳細に説明しています。３番目が、レベル１の簡単な説明です。ＤＯＭの詳細はＷ３Ｃで定義されているので、日本語のリファレンスサイトを見ると、詳細なレベルがわかります。

質問者

お礼 2010/03/16 12:16

ありがとうございました。

その他の回答 (1)

0909union
ベストアンサー率39% (325/818)

2010/03/15 16:01 回答No.1

DOMをあまり理解していないようですね。 getElementsByTagName("DIV")で取得される配列（コレクション）はＤＩＶタグのみです。 div[i].className=="inIPC2"に該当するものはありません。ＤＯＭのやり方に従えば、ＤＩＶオブジェクトのchildNodesのコレクションでネストされているタグ（子オブジェクトに）にアクセスします。 div[i].chiidNodes ですね。逆に div[i].className=="inC2" とすれば、ＤＩＶのテキストノードには「連絡情報」しかなく、他にはＩＮＰＵＴタグのみなので、両方ともinnerHTMLで書き換えられてしまいます。結局何をしたいのかよくわからないので、適切なアドバイスができませんが、通常このような場合、 ID指定で書き換えを行います（ユニークにオブジェクトを特定する）。ノード、オブジェクトなどの階層を勉強して、その階層にどのようにアクセスするか勉強してからでないと、この意味不明なコードを書き続ける事になるでしょう。

質問者

お礼 2010/03/16 12:15

ありがとうございました。

関連するQ&A

JavascriptでValueを変えるには
再び質問致します。getElementByIdを前回の質問から学ばせて頂きました。やりたいことはTagの値の変更です。以下のスクリプトでgetElementByIdはアラートが出ますので存在し値もあっている訳ですが代入が出来ません。ReadOnlyをはずしても駄目です。何かが間違っていると思います。宜しく御願い致します。 <html> <head> <title>エレメントの表示</title> </head> <script type="text/javascript"> function Disp_change() {function SchDefult_Disp_change() { alert("in1"); if (document.getElementById("SchDefult").value == 'Only For' ) { alert( "必須入力です　　　" )}; SchDefult.value = "in1"; SchDefult = "in1"; } </script> <body> <div class="frameHead frameDetail"> <div class="inC1">連絡情報</div> <div class="clear"><hr /></div> <div class="inC2"> <input class="button3" type="button" name="fromUserList" value="" onclick="Disp_change()"> <input class="inIPC2 " type="text" id="SchDefult" name="parent" value="Only For"> </div> <script type="text/javascript"> Disp_change(); }; </script>
- ベストアンサー
- Java
javascript クイズ
こちらの　http://okwave.jp/qa/q4105194.html 回答のNo.4の回答者様のソースコードなのですが <html> <head><style>.hid{display:none} .disp{display:block}</style></head> <body> <div id="s0">Start!!<input type="button" value="click" onClick="view();$('s0').className='hid';"></div> <div id="mn"></div> <div id="s1" class="hid"> Q1.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s2" class="hid"> Q2.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s3" class="hid"> Q3.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s4" class="hid"> Q4.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s5" class="hid"> Q5.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="hz" class="hid"> はずれでした！ <input type="button" value="次に進む" onClick="nextq()"> </div> <div id="sk" class="hid"> 正解です！ <input type="button" value="次に進む" onClick="nextq()"> </div> <script> var n=3; var q=5; var f=[]; var l=[]; var c=0; var cntc=0; window.onload=function(){ for(var i=0;i<n;i++){ do x=Math.floor(Math.random()*q)+1; while(f[x]) f[x]=true;l[i]=x; } } function view(){$('s'+l[c]).className='disp';$('mn').innerHTML=c+1+"問目";} function $(o){ return document.getElementById(o); } function hazure(){ $('hz').className='disp';} function seikai(){ $('sk').className='disp'; cntc++;} function nextq(){ $('sk').className='hid'; $('hz').className='hid'; $('s'+l[c]).className='hid'; if(++c>=n) owari(); else view(); } function owari(){ $('mn').innerHTML='正解数は、'+cntc; } </script> このままですと正解と不正解のボタンがそれぞれ一回ずつ押せてしまいますこれを正解、不正解のどちらか一回しか押せないようにするにはどうすればよろしいでしょうか？よろしくお願いします。
- ベストアンサー
- JavaScript
JavaScript表示切替の問題
ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>
- ベストアンサー
- JavaScript
innerHTML内では改行は禁止？
基本的なことかもしれませんが、JavaScript初心者なので質問させてください。 innerHTML内で改行を入れると実行されないのでしょうか？たとえば、これ↓はうまく行くのですが、 <script type="text/javascript"> function change1() { document.getElementById('change1').innerHTML='<p>ハケには毛が多い</p><p>ハゲには毛がない</p><input type="button" value="失礼しました m(_ _)m" />' } </script> <div id="change1"> <p>カラスは黒い</p> <p>ガラスは透明</p> <input type="button" value="ここを押すと文章が変わります" onClick="change1();"> </div> こうすると↓うまく行きません。 <script type="text/javascript"> function change2() { document.getElementById('change2').innerHTML=' <p>ハケにはやはり毛が多い</p> <p>ハゲにはやはり毛がない</p> <input type="button" value="再び失礼しました m(_ _)m" />' } </script> <div id="change2"> <p>カラスは黒い</p> <p>ガラスは透明、、、じゃないものもある</p> <input type="button" value="ここを押すと文章が変わります？" onClick="change2();"> </div> 別に困っているわけではないのですが、ソースは見やすく書きたいのでよろしくお願いします。
- ベストアンサー
- JavaScript
JavaScriptでテキストを表示・非表示・・・
こんばんは。お世話になります。 JavaScriptでテキストがボタンを押すと表示/非表示と切り替わるようにしたいです。サイトを参考に試してみましたが一か所しか表示/非表示となりませんでした。 1行おきに表示/非表示としたいのでブロック単位では指定出来ません。 display構文を使って作りました。 div idがそれぞれの部分に必要かと思い、div id="○○a"、div id="○○b"という風に付けましたがうまくいきませんでした。　　　↓このような形にしたいです　あいうえおかきくけこ　　サシスセソタチツテト　←この行を表示/非表示　なにぬねのはひふへほ　　マミムメモヤユヨ　←この行を表示/非表示こういう風なように打ちました。あいうえおかきくけこ<br> <div id="disp">サシスセソタチツテト</div><br> 　　　　　　　なにぬねのはひふへほ<br>　 <div id="disp">マミムメモヤユヨ</div><br> <form> <input type="button" value="表示" onclick="Hyoji1(0)"> <input type="button" value="非表示" onclick="Hyoji1(1)"> </form> <script type="text/javascript">  </script> どの辺りを間違っているでしょうか?宜しくお願い致します。
- ベストアンサー
- JavaScript
firefox、opera等での番号の数え方
現在Javascriptを勉強中で教材中での疑問なのですが下の記述でどうしても腑に落ちないことがあります。 IEの方の[]の中の番号の数え方は分かるのですが firefox用ではどういう数え方をすれば node[0].childeNodes[5].childeNodes[1].innerHTML......... という数え方になるのでしょうか？開始タグと終了タグを分けて数えているのでしょうか？分かる方回答お願いします。 // IE用 function change(){ var node = document.getElementsByTagName("body"); node[0].childNodes[2].childNodes[0].innerHTML = "変更しました"; } // FireFoxやOpera用 function change(){ var node = document.getElementsByTagName("body"); node[0].childNodes[5].childNodes[1].innerHTML = "変更しました"; } --------HTML---------- <body> <h1>サンプル３</h1> <p>ここが変わります。</p> <div> <p>深いノード1</p> <p>深いノード2</p> </div> <form> <input type="button" value="変更" onclick="change();"> </form> </body>
- ベストアンサー
- JavaScript
同じ i 番目のclassを連動させることはできますか？
お世話になります <script type="text/javascript"></script> <style type="text/css"></style> <div class="id">名前1</div> <div class="pass"> <input type="password" name="password" class="pass0"> <input type="button" name="login" value="LOG IN" class="login"> </div> <div class="id">名前1</div> <div class="pass"> <input type="password" name="password" class="pass"> <input type="button" name="login" value="LOG IN" class="login"> </div> のような感じでclass("id")[0]をクリックしたらclass("pass")[0]を表示、class("id")[1]をクリックしたらclass("pass")[1]を表示・・・というふうにしたいのですがなかなかうまくいきません＞＜名前とパス両方を入力にしてやる方法もできますし、それぞれのclass("id")にfunction()を振って obj0[0].onclick = function() { obj1[0].style.display = "block"; } obj0[1].onclick = function() { obj1[1].style.display = "block"; } のようなやり方もできるのはできます後者のやり方は他の部分でもいろいろ使っているので記事やメンバーが増えるたびに新たに追加していかないといけないので***.onclick = function() { } を配列にするなどまとめてできる方法があれば教えていただきたいのですが＾＾；
- ベストアンサー
- JavaScript
「ポタン」で表示・非表示 (つづき)(^^;
「ポタン」で表示・非表示ブロック<Div></Div>の「表示・非表示」を「ポタン」でやりたいのですが。。の件で、下記の回答をいただき、できたのですが、最初に「★非表示」の状態にしたい場合は、どうしたらいいのでしょうか?　よろしく願いいたします。 <html> <body> <div id="a">abcdefg</div> <input type="button" value="on/off" onClick="disp('a')"> <hr> <div id="b">abcdefg</div> <input type="button" value="on/off" onClick="disp('b')"> <hr> <script> function disp(id){ // alert(document.getElementById(id).style.display=='none'?'block':'none'); document.getElementById(id).style.display = document.getElementById(id).style.display=='none'?'block':'none'; } </script>
- ベストアンサー
- JavaScript
JavaScriptのdiv.style属性の変更が反映されない：最後
JavaScriptのdiv.style属性の変更が反映されない：最後のDivタグを除いたすべてのDivタグに改ページ属性を有効にするようJavaScriptで制御したいと考えています。しかし、以下のようなプログラムでは、スタイル属性が更新されず改ページが実行されてしまうため、１枚真っ白な紙が印刷されることになってしまいます。こちらの意図したように動作させるにはどうしたらよいでしょうか。 <html> <head> <style> div.test { page-break-after:always; color:black; } </style> <script type="text/javascript"> window.onload = function() { var divs = document.getElementsByTagName('div'); for(i = divs.length - 1; i >= 0; i--){ if(divs[i].className == "test"){ divs[i].style.pageBreakAfter = ""; break; } } }; </script> </head> <body> <div class="test">テスト</div> <div class="test">テスト</div> <div class="test">テスト</div> </body> </html>
- ベストアンサー
- JavaScript
jQueryを利用してのランダム表示について
jQueryを学習しています。学習し始めてから1ヵ月程度になります。途中まで考えたのですが、次にどうしたらいいか検討がつきません。基本的なこともあまりわかっていない状況での質問で申し訳ありません。どなたかご教授のほどお願いいたします。考えていることは以下になります。・Nextのボタンを押すとランダムでclass=boxの内容を１つ表示したい・再度、Nextのボタンを押すと表示されていたものが消えて、別のclass=boxを表示したい ////////////////　スクリプト　//////////////// <script type="text/javascript"> var a = ".box" $(function(){ $(a).hide(); }); $(function(){ $("#tugi").click( function(){ var items = $(a).get().sort(function() { return Math.round(Math.random()) ; }).slice(0, 1); $(items).show(); }); }); $(function(){ $(".answer").hide(); }); $(function(){ $(".kirikae").click( function(){ $(this).next().toggle(); }); }); </script> ////////////////　HTML　//////////////// <body> <div id="wrap"> <input type="button" value="Next"id="tugi"/> <div id="1" class="box"> 問題1 <br /> <input type="button"value="答えの表示" class="kirikae"/> <div class="answer"> 答え1 </div> </div> <div id="2" class="box"> 問題2<br /> <input type="button"value="答えの表示" class="kirikae"/> <div class="answer"> 答え2 </div> </div> <div id="3" class="box"> 問題3<br /> <input type="button"value="答えの表示" class="kirikae"/> <div class="answer"> 答え3 </div> </div> <div id="4" class="box"> 問題4<br /> <input type="button"value="答えの表示" class="kirikae"/> <div class="answer"> 答え4 </div> </div> </div> </body>
- 締切済み
- JavaScript