selectが男だったらサッカーフットサルを表示させたいんですが上手く行きません。どうすればいいでしょうか？本当に初歩的な知識しかないんですがなんとかなりませんか？素のjavascriptです足りない情報は補足します ```javascript function sexChecker() { var selectedNumber = document.form1.select1.selectedIndex; var selectedValue = document.form1.select1.options[selectedNumber].value; if (selectedValue == "man") { document.getElementById("man").style.display = "inline-block"; document.getElementById("woman").style.display = "none"; } else if (selectedValue == "woman") { document.getElementById("woman").style.display = "inline-block"; document.getElementById("man").style.display = "none"; } } ``` ```html Hello world! 個人情報姓(漢字): 名(漢字): 姓カナ: 名カナ: 性別: 男女趣味: サッカーフットサルダンス旅行撮影 ``` ```css .a, .b, .c, .d{ display: inline-block; } .wrapper { height: 100%; width: 80%; } #man { display: none; } #woman { display: none; } ```

回答と言うより現状のコードへの指摘です。 - css,jsファイル読み込み記述がWindowsのフルパス記述となっている。 →本来Webサーバーで動くものなのでローカル限定の記述となっていて、Webサーバーにアップしたときも動かないですし、**これが何かの課題や宿題でやってたとして提出した先に同じファイルを同じ場所に置かなきゃ動きません。**せめて、読み込むhtmlからの相対パスにしましょう - jsファイル読み込み記述のダブルクォーテーションが一部全角になっている``` src=[“]H:\html\exam_3.js"``` →プログラムは基本半角で書くものです（全角が許可されていてもあまり有用ではありません）ここだけじゃないかもしれないので全体見直すこと。 - セミコロンは中に入れましょう。``` onchange="sexChecker()";>``` - formのnameがfrom1になっているがJavaScript側でそのnameを使っていない。 - optionは単数ではありませんなどなど、そもそもCSS、JSが読み込まれているか怪しいですし、正しく読み込んで実行するための記述ができていません。私が上記に指摘した項目を全てなおしてようやく「男を選んだときにmanの項目が表示状態になる」が実現できます。「自分で考えました」とのことですが、最低限のお作法を守らないとプログラムは動きません。プログラムは指示したとおりにしか動かないものです。人に聞くものいいですが、その前に自身がちゃんとお作法を守っているか、勝手に存在しない機能を使っていないか、エラーは出ていないか、そのエラーを理解しているか・本当にどうしようもないかこのあたりを確認してください。今直面している問題は質問者さんが世界で初めてあたった問題ではないはずです。まずは作法を大事にして、身につけていってください。

selectboxの内容によって表示させるdivを変えたい

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}

関連した質問