Q&A
質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。
selectが男だったら
<div id="man"> <input type="checkbox" class="c">サッカー <input type="checkbox" class="c">フットサル<br> を表示させたいんですが上手く行きません。 どうすればいいでしょうか？ 本当に初歩的な知識しかないんですがなんとかなりませんか？ 素のjavascriptです 足りない情報は補足しますjavascript
1function sexChecker() { 2 var selectedNumber = document.form1.select1.selectedIndex; 3 var selectedValue = document.form1.select1.options[selectedNumber].value; 4 if (selectedValue == "man") { 5 document.getElementById("man").style.display = "inline-block"; 6 document.getElementById("woman").style.display = "none"; 7 } else if (selectedValue == "woman") { 8 document.getElementById("woman").style.display = "inline-block"; 9 document.getElementById("man").style.display = "none"; 10 } 11}
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Hello world!</title> 5 <script type="text/javascript" src="H:\html\exam_3.js"></script> 6 <link rel="stylesheet" type="text/css" href="H:\html\exam_3.css"> 7 </head> 8 <body> 9 <div class="wrapper"> 10 <h1>個人情報</h1> 11 <form name="form1"> 12 <p class="a">姓(漢字):</p><input type="text" class="a"><p class="a">名(漢字):</p><input type="text" class="a"><br> 13 <p class="b">姓カナ:</p><input type="text" class="b"><p class="b">名カナ:</p><input type="text" class="b"><p class="b">性別:</p> 14 <select name="select1" onChange="sexChecker();"> 15 <option value="none"></option> 16 <option value="man">男</option> 17 <option value="woman">女</option> 18 </select><br> 19 <p class="c">趣味:</p> 20 <div id="man"> 21 <input type="checkbox" class="c">サッカー 22 <input type="checkbox" class="c">フットサル<br> 23 </div> 24 <div id="woman"> 25 <input type="checkbox" class="c">ダンス 26 <input type="checkbox" class="c">旅行 27 <input type="checkbox" class="c">撮影<br> 28 </div> 29 <input type="reset" value="リセット" class="d"> 30 <input type="button" value="決定" class="d"> 31 </form> 32 </div> 33 </body> 34</html>
css
1.a, .b, .c, .d{ 2 display: inline-block; 3} 4 5.wrapper { 6 height: 100%; 7 width: 80%; 8} 9 10#man { 11 display: none; 12} 13 14#woman { 15 display: none; 16}
最初はそんなものです。ただ、質問の「要件」とは関係ない部分です。この一文は不要です。 >本当に初歩的な知識しかないんですがなんとかなりませんか？
</select にonclickつけたのはどのような意図があってのことでしょうか。コピペのような自身がきちんと組んだものでなければ出展を記載してください。
自分で考えました。それはセレクトが例えば男になったら、みたいな意味です。もしかしてonchengeですか？一旦変えてい￥見ますね。
> </select onclick="sexChecker();"> 閉じタグにつけるものではないと思います。
本当ですね！onchenge()にしてかつ位置も直しましたがまだ動かないようです。
onchenge → onchange デフォルトで用意されている機能名についてはちゃんと調べてください。
本当ですね！直しました
あと「動きません」「うまくいきません」では起きている現象が伝わりません。ブラウザ開発ツールのコンソールでエラーが出ていないか、など起きている現象を具体的に書いてください。CSSのパス、それ合ってるんでしょうか。実際はWebサーバーで動くものなのであまりWindowsのパスをそのまま書くのは好ましくありません。
そろそろ最初の指摘についても対応していただけると・・ >足りない情報は補足します
忘れてました。webページのF12キーでデバッグ画面が開けたので見てみるとバグの原因がわかりました。そもそもjsが読み込まれてなかったし変なスペースがあったり全角の"があったり。とりあえず解決したようですありがとうございました！また質問があったら別で質問すると思います
質問内容を充実させることで解決が早まります。そこを忘れていては解決する気がないと捉えられても仕方がありません。回答に必要だからこうやって指摘しています。 またその部分は私が回答で指摘している部分です。お作法を守っていないことに他なりません。
ひとつ前の質問にも言えることですね。 anAnonymousさんは質問するときのお作法も守れているとは言えません。説明書はきちんと読んでから取り扱うものです。https://teratail.com/help/question-tips
まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
回答2件
0
性差別に対する関心が高まるこのご時世で、こういう設問はありえないと
思いますが、とりあえずあくまでもサンプルとして
javascript
1window.addEventListener('DOMContentLoaded', function(e){ 2 document.querySelector('[name=select1]').addEventListener('change',function(e){ 3 var v=e.target.value; 4 ["man","woman"].forEach(function(x){ 5 document.querySelector('#'+x).style.display=(x==v)?"block":"none"; 6 }); 7 }); 8});
HTML
1<form name="from1"> 2<p class="b">性別:</p> 3<select name="select1"> 4<option value="none"></option> 5<option value="man">男</option> 6<option value="woman">女</option> 7</select> 8<br> 9<p class="c">趣味:</p> 10<div id="man" style="display:none"> 11<input type="checkbox" class="c">サッカー 12<input type="checkbox" class="c">フットサル<br> 13</div> 14<div id="woman" style="display:none"> 15<input type="checkbox" class="c">ダンス 16<input type="checkbox" class="c">旅行 17<input type="checkbox" class="c">撮影<br> 18</div> 19</form> 20
投稿2018/07/05 03:29
総合スコア114829
ありがとうございます！いいコードだと思いましたがとりあえず書きかけのコードを上手く使えるようにしたい気持ちがあったので一旦おいておきました。また後ほどaddEventListener()等について調べてみます
0
回答と言うより現状のコードへの指摘です。
- css,jsファイル読み込み記述がWindowsのフルパス記述となっている。
→本来Webサーバーで動くものなのでローカル限定の記述となっていて、Webサーバーにアップしたときも動かないですし、**これが何かの課題や宿題でやってたとして提出した先に同じファイルを同じ場所に置かなきゃ動きません。**せめて、読み込むhtmlからの相対パスにしましょう
- jsファイル読み込み記述のダブルクォーテーションが一部全角になっている
src=[“]H:\html\exam_3.js"
→プログラムは基本半角で書くものです（全角が許可されていてもあまり有用ではありません）ここだけじゃないかもしれないので全体見直すこと。
- セミコロンは中に入れましょう。
onchange="sexChecker()";> - formのnameがfrom1になっているがJavaScript側でそのnameを使っていない。
- optionは単数ではありません
などなど、そもそもCSS、JSが読み込まれているか怪しいですし、正しく読み込んで実行するための記述ができていません。
私が上記に指摘した項目を全てなおしてようやく「男を選んだときにmanの項目が表示状態になる」が実現できます。
「自分で考えました」とのことですが、最低限のお作法を守らないとプログラムは動きません。
プログラムは指示したとおりにしか動かないものです。
人に聞くものいいですが、その前に自身がちゃんとお作法を守っているか、勝手に存在しない機能を使っていないか、エラーは出ていないか、そのエラーを理解しているか・本当にどうしようもないか
このあたりを確認してください。
今直面している問題は質問者さんが世界で初めてあたった問題ではないはずです。
まずは作法を大事にして、身につけていってください。
投稿2018/07/05 04:38
総合スコア80850
ありがとう御座いますご指摘の通りでした。デバッグツールを使っていこうと思っています。あとはもうちょっとマシなエディターがいいです桜エディターで修行しているので...
そろそろ「修行」という表現やめませんか？
素のJavaScriptであっても速度的にはjQueryよりも高速であるのは明らかであるため、
jQueryを使わない現場もあります。
エディターは幾らでもいいものはあります。単なるテキストエディタでは文法のチェックも実行してみないと分かりません。
好みや現場による制限もあるかもしれないので、そちらに従うべきですが、
ある程度そういった構文チェックは自動で行ってくれるエディタを使うようにしてください。
調べて使ってみて自分好みのものを使ってください。
サクラエディタでもプラグイン入れればシンタックスチェックできますけどね…
それも入れないのを含めて”修行”なんでしょうかね。ご本人出てこなくなりましたし、どう落としどころを持っていくつもりなのか分からないので、放置されたままになりそうですけど。
つまらない構文ミスに時間かけたり上から目瀬で回答者を評価している暇があったらもっとロジック部分で頭悩ますべきなんですけどね。
この質問者だけじゃないけど、他人のリソースは平気で浪費するくせに、頑なにツールの活用を拒否する一定層が存在するんですよね…
代表的な例がEclipseですけど、私も最初の頃は抵抗ありましたね。
使いこなすのが難しそう、という感じで。
あのとききちんと教えてくれた先輩には今も感謝してます。
まあ、html,css,JSくらいであればAdobe製のあのエディタで充分ですね。
Eclipseはセッティングが手間ですからね〜。重いし。
自分はNetbeans使ってます。
> ロジック部分で~
「コピペして動かなかったら質問する」ってだけみたいだから、まずその発想はないだろうなぁ
> 「コピペして動かなかったら質問する」
それでもいいけど、「どうなったか」を書かずにただ「動きませんでした」とだけ言われるのはイラっとする笑
自身のコードに過失がない限りは「質問するときのヒント」の該当箇所提示して追記を促します。
ルールに則らないとちゃんと回答もらえないのは当然ですし。面倒ならもっとお手軽なQAサイト使った方がいいです。
（※ただし同じような態度だと同じように煙たがれるのは目に見えてますが）
ま、結局たいていの質問には、月間ユーザーランキングにのっている方々とかから回答つくんでしょうけどね。
そうして、質問者は同じような質問を繰り返す・・・。
回答内容とコメントに現れますけどね。
人によるでしょうけど私がちゃんとした回答できるのはあくまでちゃんとした質問の時だけです。
いちいち、誰が質問しているかなんて調べませんからね〜
なんか変だなと思って、過去の質問見て、「あ〜この人ね」ってことは多々ある。
そういえば、「ぐるなびAPI」の彼は今何をしてるんだろ？笑
あなたの回答
tips
プレビュー
