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

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

ただいまの
回答率

87.37%

javascript 選択したoption値を取得する

解決済

回答 3

投稿

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

score 9

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Stopwatch</title>
  <link rel="stylesheet" href="styles.css">

</head>
<body>
  <div id="timer">00:00.000</div>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <button id="reset">Reset</button>
  <form name ="form">
    <select name="mintus" class="mintus">
      <option value="time_1" id="time1">30</option>
      <option value="time_2" id="time2">60</option>
      <option value="time_3" id="time3">90</option>
    </select>
  </form>
  <div>
    <button id="sum">計算</button>
    <input type-text id="sum_account">
  </div>

  <script src="main.js"></script>
</body>
</html>
'use strict';

{
  const timer = document.getElementById('timer');
  const start = document.getElementById('start');
  const stop = document.getElementById('stop');
  const reset = document.getElementById('reset');
  const math = document.getElementById('sum');
  const mintus = document.getElementById('mintus');
  const timeselect = document.querySelector('.mintus')

  let startTime;
  let timeoutId;
  let elapsedTime = 0;

  function countUp() {
    const d = new Date(Date.now() - startTime + elapsedTime);
    const m = String(d.getMinutes()).padStart(2, '0');
    const s = String(d.getSeconds()).padStart(2, '0');
    const ms = String(d.getMilliseconds()).padStart(3, '0');
    timer.textContent = `${m}:${s}.${ms}`;

    timeoutId = setTimeout(() => {
      countUp();
    }, 10);
  }

  function setButtonStateInitial() {
    start.disabled = false;
    stop.disabled = true;
    reset.disabled = true;
  }

  function setButtonStateRunning() {
    start.disabled = true;
    stop.disabled = false;
    reset.disabled = true;
  }

  function setButtonStateStopped() {
    start.disabled = false;
    stop.disabled = true;
    reset.disabled = false;
  }

  setButtonStateInitial();

  start.addEventListener('click', () => {
    setButtonStateRunning();
    startTime = Date.now();
    countUp();
  });

  stop.addEventListener('click', () => {
    setButtonStateStopped();
    clearTimeout(timeoutId);
    elapsedTime += Date.now() - startTime;
  });

  reset.addEventListener('click', () => {
    setButtonStateInitial();
    timer.textContent = '00:00.000';
    elapsedTime = 0;
  });


  math.addEventListener('click', () => {
    stop.click();
    let timeTxt = timer.textContent.replace(":", "").replace(".", "");
    // let timeresult = "#time1"||"#time2"||"#time3";
    // let timeresult = str;
    selectElement.addEventListener('change',(event) =>{
      const timeresult = timeselect;
    });
    switch (timeresult) {
        case "time_1":
          const a =180000 - timeTxt;
          console.log(a)
          break;
        case "time_2":
          const b =360000 - timeTxt;
          console.log(b)
          break;
        case  "time_3":
          const c =540000 - timeTxt;
          console.log(c);
          break;
    } 
}

実装したいこととしては
1  math.addEventListener('click', () => {以降の部分で、htmlのoptionが変更されるたびにその値をJavaScriptのswitch構文の式に当てはめたい
changeメソッドを使うことはわかるが、その記載方法がわからず、selectElement.addEventListener('change',(event以下の記述で timeresultに選択した選択した値を入れるような実装したい
説明が下手ですいません。よろしければご意見をお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • miyabi_takatsuk

    2020/09/22 18:41

    select[name="mintus"]の取得はできていますか?
    構文の現状は、上記を取得するようにはなっていないようですが。

    キャンセル

  • kobayashi.j

    2020/09/22 18:45

    取得もできてないです。
    そこもどうしたらいいのかをアドバイスをいただければと思います。

    キャンセル

回答 3

+3

とりあえずmath.addEventListenerを閉じる「})」がないのでエラーになっていますです

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

checkベストアンサー

+2

まず、
select[name="mintus"]を取得できていない原因は、
idで取得しようとしているのに、
HTMLでは、idを付与していないからです。

<select name="mintus" id="mintus" class="mintus">
      <option value="time_1" id="time1">30</option>
      <option value="time_2" id="time2">60</option>
      <option value="time_3" id="time3">90</option>
</select>

とすれば、mintus変数に、select[name="mintus"]が格納されます。

あとは、mintus変数にchangeイベントを付与します。

mintus.addEventListener('change', () => {
    stop.click();

    let timeTxt = timer.textContent.replace(":", "").replace(".", "");

    switch (mintus.value) {
        case "time_1":
          const a =180000 - timeTxt;
          console.log(a)
          break;
        case "time_2":
          const b =360000 - timeTxt;
          console.log(b)
          break;
        case  "time_3":
          const c =540000 - timeTxt;
          console.log(c);
          break;
    }
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

修正点1 html

const mintus = document.getElementById('mintus');は存在せず
idではなくclassでmintusは多分、minutesのタイプミスなので

<select name="minutes" id="minutes"> としました。

修正点2 Javascript

ソースを見た感じ、クリックした時に選択されているoptionが何番目かがわかればいいだけなので
changeイベントは不要です。

        math.addEventListener('click', () => {
            stop.click();
            let timeTxt = timer.textContent.replace(":", "").replace(".", "");
            const selectedNum = minutes.selectedIndex;
            switch (selectedNum) {
                case 0:
                    const a = 180000 - timeTxt;
                    console.log(a)
                    break;
                case 1:
                    const b = 360000 - timeTxt;
                    console.log(b)
                    break;
                case 2:
                    const c = 540000 - timeTxt;
                    console.log(c);
                    break;
            }
        });

以下が修正したコードをまとめたもので、コピペで動きます。
htmlとJavascriptは面倒なので分けてません。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>Stopwatch</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
    <div id="timer">00:00.000</div>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <button id="reset">Reset</button>
    <form name="form">
        <select name="minutes" id="minutes">
            <option value="time_1" id="time1">30</option>
            <option value="time_2" id="time2">60</option>
            <option value="time_3" id="time3">90</option>
        </select>
    </form>
    <div>
        <button id="sum">計算</button>
        <input type-text id="sum_account">
    </div>
    <script>
        const timer = document.getElementById('timer');
        const start = document.getElementById('start');
        const stop = document.getElementById('stop');
        const reset = document.getElementById('reset');
        const math = document.getElementById('sum');
        const minutes = document.getElementById('minutes');

        let startTime;
        let timeoutId;
        let elapsedTime = 0;

        function countUp() {
            const d = new Date(Date.now() - startTime + elapsedTime);
            const m = String(d.getMinutes()).padStart(2, '0');
            const s = String(d.getSeconds()).padStart(2, '0');
            const ms = String(d.getMilliseconds()).padStart(3, '0');
            timer.textContent = `${m}:${s}.${ms}`;

            timeoutId = setTimeout(() => {
                countUp();
            }, 10);
        }

        function setButtonStateInitial() {
            start.disabled = false;
            stop.disabled = true;
            reset.disabled = true;
        }

        function setButtonStateRunning() {
            start.disabled = true;
            stop.disabled = false;
            reset.disabled = true;
        }

        function setButtonStateStopped() {
            start.disabled = false;
            stop.disabled = true;
            reset.disabled = false;
        }

        setButtonStateInitial();

        start.addEventListener('click', () => {
            setButtonStateRunning();
            startTime = Date.now();
            countUp();
        });

        stop.addEventListener('click', () => {
            setButtonStateStopped();
            clearTimeout(timeoutId);
            elapsedTime += Date.now() - startTime;
        });

        reset.addEventListener('click', () => {
            setButtonStateInitial();
            timer.textContent = '00:00.000';
            elapsedTime = 0;
        });

        math.addEventListener('click', () => {
            stop.click();
            let timeTxt = timer.textContent.replace(":", "").replace(".", "");
            const selectedNum = minutes.selectedIndex;
            switch (selectedNum) {
                case 0:
                    const a = 180000 - timeTxt;
                    console.log(a)
                    break;
                case 1:
                    const b = 360000 - timeTxt;
                    console.log(b)
                    break;
                case 2:
                    const c = 540000 - timeTxt;
                    console.log(c);
                    break;
            }
        });

    </script>
</body>

</html>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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