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

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

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

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

Q&A

解決済

1回答

318閲覧

javascriptにて、ブラウザからセレクトボックスにて変数を変更する方法

taka_php

総合スコア14

JavaScript

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

0グッド

0クリップ

投稿2018/08/13 11:14

編集2018/08/13 14:48

javascriptで、1問ずつ問題が表示されるプログラムを作っています。このプログラムのブラウザ画面に、セレクトボックス(1~4の整数が選べるように)を追加して、ユーザーが指定した問題番号の問題を表示させたいと思っています。

具体的には、ブラウザ画面から 以下のコードの currentNum の番号をセレクトボックスの操作により変更できるようにしたいです。

以下のように作ってみたのですが、セレクトボックスを操作しても問題が変わりません。対応を教えていただけないでしょうか?

javascript

1 2(function() { 3 'use strict'; 4 5 var question = document.getElementById('question'); 6 var btn = document.getElementById('btn'); 7 var answers = document.querySelectorAll('#answers > li'); 8 9 10 var quizSet = [ 11 {q: 'What is A?', a: ['A0', 'A1', 'A2']}, 12 {q: 'What is B?', a: ['B0', 'B1', 'B2']}, 13 {q: 'What is C?', a: ['C0', 'C1', 'C2']} 14 ]; 15 16 var currentNum = 0; 17 18 19 function setQuiz() { 20212223 } 24 25 function setEvents() { 26 var i; 27 for (i = 0; i < answers.length; i++) { 28 answers[i].addEventListener('click', function() { 29 checkAnswer(this); 30 }); 31 } 32 } 33 34 function checkAnswer(node) { 35363738 } 39 } 40 41 setQuiz(); 42 setEvents(); 43 44})(); 45

html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Quiz</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="container"> <div id="question"></div> <ul id="answers"> <li></li> <li></li> <li></li> <li></li> </ul> <div id="btn" class="disabled">Next</div> <div id='kaitou'></div> <div id='kaisetu'></div> <p>選択した番号 <span id="sp1"></span></p> <form name="form1"> <select name="color1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </form> <br/> <input type="button" value="問題選択" onclick="btn1_click()"/> </div> <script src="js/main.js"></script> </body> </html>

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

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

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

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

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

guest

回答1

0

ベストアンサー

function btn1_click(){}内で取得した値を下の即時関数の中に引き渡すことは出来ません。
値の取得自体は出来ていますので
まず、問題選択のボタンのクリック処理をボタンに直接書かずに
即時関数の内側にaddEventListenerを使って書いてください。

(function(){ 'use strict'; // id の questionを、変更させる命令 var question = document.getElementById('question'); var btn = document.getElementById('btn');   var btn2 = document.getElementById('btn2') //問題選択のボタン   var currentNum = 0; ・・・ btn2.addEventListener('click', function(){ var num = document.form1.color1.selectedIndex; // 値(value値)を取得 currentNum = document.form1.color1.options[num].value; setQuiz(); setEvents(); }) })()

クリックした時にcurrentNumに値をいれて、以下の2つの関数を実行してみたらいかがでしょうか?

setQuiz(); setEvents();

投稿2018/08/13 12:23

編集2018/08/13 14:04
keisukeh

総合スコア657

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

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

taka_php

2018/08/13 13:25

ご回答ありがとうございます。 即時関数の中には、移動できないのですね。 addEventListenerを使って、クリックしたときに以下の処理をするように書けばいいのですね。 function btn1_click(){ // 値(数値)を取得 var num = document.form1.color1.selectedIndex; // 値(value値)を取得 var str = document.form1.color1.options[num].value; currentNum = str;  setQuiz();  setEvents(); ただ、フォームの情報をaddEventListenerに適応させる方法がいまいちわかりません。 <form name="form1" id="aaa">という感じで、フォームにidを設定したので良いでしょうか?
keisukeh

2018/08/13 14:00 編集

<div id="btn" class="disabled">Next</div> このタグにやってることと一緒のことをやったらいいです。 <input type="button">に適当なidつけてgetElementByIdで要素を取得して addEventListenerでクリックイベントをつけましょう。
taka_php

2018/08/13 14:34

<input type="button">にidをつけるのですね。htmlについてもっと学習したいと思います・・・ 最終的には、全て書いてもらうまで理解できず申し訳ございませんでした。1週間ほど考えてずっとできなかったので大変助かりました。本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問