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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

3回答

477閲覧

JavaScript 条件分岐

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2017/09/27 09:28

編集2017/09/28 04:07

###前提・実現したいこと
すいません。学校の課題で質問です。
画像のような条件分岐のJSを書きたいのですが、まったくわかりません・・・・助けてください。
HTMLとCSSをかじっただけの初心者なので出来ればコードを書いていただければ嬉しいです。
デザインは適当でいいので・・・申し訳ございません。よろしくお願いいたします。
イメージ説明

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/09/27 09:34

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。https://teratail.com/help/avoid-asking
yambejp

2017/09/28 01:25

質問内容を後からまるっと削除するのは今後はやめてください
yambejp

2017/09/28 01:39

よく見たら退会になってますね。課題みたいだったので誰かにチクられたのかな・・・
date

2017/09/28 11:09

teratailの方が質問を編集することがあるんですね
guest

回答3

0

2 x 2 通り

課題は今までに学んできた技術を使ってコードを書くことに意味があるので、見ず知らずの他人が書いたコードを提出するのは出題した先生の意図から外れてしまうと思います。
大まかには3パターン程、書き方がありますので、今までに習ってきた事を思い出しながら、関連しそうな技術を調べ、コードを書いてみてはいかがでしょうか。

  • if, if-else 文を使う
  • switch 文を使う
  • 二次元配列を使う

過去スレッド

参考になりそうな過去スレッドも紹介しておきます。

Re: manzimaru さん

投稿2017/09/27 09:42

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

これ、条件分岐よりもDOM操作のほうが難しいような……?



とりあえず「javascript 診断 yes no」でググるといくつか出てきますよ。jQueryを使っていいなら少し改変すればできるのでは?
jQueryでかんたん作成!診断テストの作り方 | | それからデザイン スタッフブログ

投稿2017/09/27 10:51

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

チェックボタンでやるか、ラジオボタンでやるかによって処理が大幅に変わりますね
一応排他処理がラクなラジオボタンにしておきます

CSS

1.hide{display:none}

javascript

1document.addEventListener('change',function(e){ 2 var t=e.target; 3 var q1=document.querySelector('[name=q1]:checked')?document.querySelector('[name=q1]:checked').value:""; 4 var q2=document.querySelector('[name=q2]:checked')?document.querySelector('[name=q2]:checked').value:""; 5 6 if(q1=="Y" && q2=="Y" || 7 q1=="Y" && q2=="N" || 8 q1=="N" && q2=="Y"){ 9 document.querySelector('#imgA').classList.remove('hide'); 10 document.querySelector('#imgB').classList.add('hide'); 11 }else if(q1=="N" && q2=="N"){ 12 document.querySelector('#imgA').classList.add('hide'); 13 document.querySelector('#imgB').classList.remove('hide'); 14 } 15});

HTML

1<form> 2Q1: 3<input type="radio" name="q1" value="Y"> 4<input type="radio" name="q1" value="N"> 5Q2: 6<input type="radio" name="q2" value="Y"> 7<input type="radio" name="q2" value="N"> 8<hr> 9<img src="a.jpg" alt="a" class="hide" id="imgA"> 10<img src="b.jpg" alt="b" class="hide" id="imgB"> 11</form>

投稿2017/09/27 10:41

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問