質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • JavaScript

    17518questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9567questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6198questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4297questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

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

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 264

anAnonymous

score -12

selectが男だったら
<div id="man">
<input type="checkbox" class="c">サッカー
<input type="checkbox" class="c">フットサル<br>
を表示させたいんですが上手く行きません。
どうすればいいでしょうか?
本当に初歩的な知識しかないんですがなんとかなりませんか?
素の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";
  }
}
<!DOCTYPE html>
<html>
  <head>
    <title>Hello world!</title>
    <script type="text/javascript" src="H:\html\exam_3.js"></script>
    <link rel="stylesheet" type="text/css" href="H:\html\exam_3.css">
  </head>
  <body>
    <div class="wrapper">
      <h1>個人情報</h1>
      <form name="form1">
        <p class="a">姓(漢字):</p><input type="text" class="a"><p class="a">名(漢字):</p><input type="text" class="a"><br>
        <p class="b">姓カナ:</p><input type="text" class="b"><p class="b">名カナ:</p><input type="text" class="b"><p class="b">性別:</p>
      <select name="select1"  onChange="sexChecker();">
        <option value="none"></option>
        <option value="man"></option>
        <option value="woman"></option>
      </select><br>
      <p class="c">趣味:</p>
      <div id="man">
        <input type="checkbox" class="c">サッカー
        <input type="checkbox" class="c">フットサル<br>
      </div>
      <div id="woman">
        <input type="checkbox" class="c">ダンス
        <input type="checkbox" class="c">旅行
        <input type="checkbox" class="c">撮影<br>
      </div>
      <input type="reset" value="リセット" class="d">
      <input type="button" value="決定" class="d">
      </form>
    </div>
  </body>
</html>
.a, .b, .c, .d{
  display: inline-block;
}

.wrapper {
  height: 100%;
  width: 80%;
}

#man {
  display: none;
}

#woman {
  display: none;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/07/05 14:02

    ひとつ前の質問にも言えることですね。 anAnonymousさんは質問するときのお作法も守れているとは言えません。説明書はきちんと読んでから取り扱うものです。https://teratail.com/help/question-tips

    キャンセル

  • kei344

    2018/07/07 15:15

    まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

    キャンセル

  • 退会済みユーザー

    2018/07/08 02:44

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 2

+3

性差別に対する関心が高まるこのご時世で、こういう設問はありえないと
思いますが、とりあえずあくまでもサンプルとして

window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('[name=select1]').addEventListener('change',function(e){
    var v=e.target.value;
    ["man","woman"].forEach(function(x){
      document.querySelector('#'+x).style.display=(x==v)?"block":"none";
    });
  });
});
<form name="from1">
<p class="b">性別:</p>
<select name="select1">
<option value="none"></option>
<option value="man"></option>
<option value="woman"></option>
</select>
<br>
<p class="c">趣味:</p>
<div id="man" style="display:none">
<input type="checkbox" class="c">サッカー
<input type="checkbox" class="c">フットサル<br>
</div>
<div id="woman" style="display:none">
<input type="checkbox" class="c">ダンス
<input type="checkbox" class="c">旅行
<input type="checkbox" class="c">撮影<br>
</div>
</form>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/05 14:01

    ありがとうございます!いいコードだと思いましたがとりあえず書きかけのコードを上手く使えるようにしたい気持ちがあったので一旦おいておきました。また後ほどaddEventListener()等について調べてみます

    キャンセル

+1

回答と言うより現状のコードへの指摘です。

  • 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 14:07

    ありがとう御座いますご指摘の通りでした。デバッグツールを使っていこうと思っています。あとはもうちょっとマシなエディターがいいです桜エディターで修行しているので...

    キャンセル

  • 2018/07/05 14:49

    そろそろ「修行」という表現やめませんか?
    素のJavaScriptであっても速度的にはjQueryよりも高速であるのは明らかであるため、
    jQueryを使わない現場もあります。
    エディターは幾らでもいいものはあります。単なるテキストエディタでは文法のチェックも実行してみないと分かりません。
    好みや現場による制限もあるかもしれないので、そちらに従うべきですが、
    ある程度そういった構文チェックは自動で行ってくれるエディタを使うようにしてください。
    調べて使ってみて自分好みのものを使ってください。

    キャンセル

  • 2018/07/07 15:09

    サクラエディタでもプラグイン入れればシンタックスチェックできますけどね…

    キャンセル

  • 2018/07/07 15:39

    それも入れないのを含めて”修行”なんでしょうかね。ご本人出てこなくなりましたし、どう落としどころを持っていくつもりなのか分からないので、放置されたままになりそうですけど。
    つまらない構文ミスに時間かけたり上から目瀬で回答者を評価している暇があったらもっとロジック部分で頭悩ますべきなんですけどね。

    キャンセル

  • 2018/07/07 15:42

    この質問者だけじゃないけど、他人のリソースは平気で浪費するくせに、頑なにツールの活用を拒否する一定層が存在するんですよね…

    キャンセル

  • 2018/07/07 15:45

    代表的な例がEclipseですけど、私も最初の頃は抵抗ありましたね。
    使いこなすのが難しそう、という感じで。
    あのとききちんと教えてくれた先輩には今も感謝してます。
    まあ、html,css,JSくらいであればAdobe製のあのエディタで充分ですね。

    キャンセル

  • 2018/07/07 15:46

    Eclipseはセッティングが手間ですからね〜。重いし。
    自分はNetbeans使ってます。

    キャンセル

  • 2018/07/07 15:46

    > ロジック部分で~
    「コピペして動かなかったら質問する」ってだけみたいだから、まずその発想はないだろうなぁ

    キャンセル

  • 2018/07/07 15:48

    > 「コピペして動かなかったら質問する」
    それでもいいけど、「どうなったか」を書かずにただ「動きませんでした」とだけ言われるのはイラっとする笑

    キャンセル

  • 2018/07/07 15:53

    自身のコードに過失がない限りは「質問するときのヒント」の該当箇所提示して追記を促します。
    ルールに則らないとちゃんと回答もらえないのは当然ですし。面倒ならもっとお手軽なQAサイト使った方がいいです。
    (※ただし同じような態度だと同じように煙たがれるのは目に見えてますが)

    キャンセル

  • 2018/07/07 15:59 編集

    ま、結局たいていの質問には、月間ユーザーランキングにのっている方々とかから回答つくんでしょうけどね。
    そうして、質問者は同じような質問を繰り返す・・・。

    キャンセル

  • 2018/07/07 16:01

    回答内容とコメントに現れますけどね。
    人によるでしょうけど私がちゃんとした回答できるのはあくまでちゃんとした質問の時だけです。

    キャンセル

  • 2018/07/07 16:06

    いちいち、誰が質問しているかなんて調べませんからね〜
    なんか変だなと思って、過去の質問見て、「あ〜この人ね」ってことは多々ある。
    そういえば、「ぐるなびAPI」の彼は今何をしてるんだろ?笑

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17518questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9567questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6198questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4297questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。