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

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

ただいまの
回答率

89.53%

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

解決済

回答 1

投稿 編集

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

taka_php

score 9

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

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

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

(function() {
  'use strict';

  var question = document.getElementById('question');
  var btn = document.getElementById('btn');
  var answers = document.querySelectorAll('#answers > li');


  var quizSet = [
    {q: 'What is A?', a: ['A0', 'A1', 'A2']},
    {q: 'What is B?', a: ['B0', 'B1', 'B2']},
    {q: 'What is C?', a: ['C0', 'C1', 'C2']}
  ];

  var currentNum = 0;


   function setQuiz() {
・
・
・
  }

  function setEvents() {
    var i;
    for (i = 0; i < answers.length; i++) {
      answers[i].addEventListener('click', function() {
        checkAnswer(this);
      });
    }
  }

  function checkAnswer(node) {
・
・
・
    }
  }

  setQuiz();
  setEvents();

})();


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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

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 22: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を設定したので良いでしょうか?

    キャンセル

  • 2018/08/13 22:59 編集

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

    キャンセル

  • 2018/08/13 23:34

    <input type="button">にidをつけるのですね。htmlについてもっと学習したいと思います・・・

    最終的には、全て書いてもらうまで理解できず申し訳ございませんでした。1週間ほど考えてずっとできなかったので大変助かりました。本当にありがとうございました。

    キャンセル

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

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