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

index.html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Stopwatch</title>
6  <link rel="stylesheet" href="styles.css">
7
8</head>
9<body>
10  <div id="timer">00:00.000</div>
11  <button id="start">Start</button>
12  <button id="stop">Stop</button>
13  <button id="reset">Reset</button>
14  <form name ="form">
15    <select name="mintus" class="mintus">
16      <option value="time_1" id="time1">30</option>
17      <option value="time_2" id="time2">60</option>
18      <option value="time_3" id="time3">90</option>
19    </select>
20  </form>
21  <div>
22    <button id="sum">計算</button>
23    <input type-text id="sum_account">
24  </div>
25
26  <script src="main.js"></script>
27</body>
28</html>

javascript
1'use strict';
2
3{
4  const timer = document.getElementById('timer');
5  const start = document.getElementById('start');
6  const stop = document.getElementById('stop');
7  const reset = document.getElementById('reset');
8  const math = document.getElementById('sum');
9  const mintus = document.getElementById('mintus');
10  const timeselect = document.querySelector('.mintus')
11
12  let startTime;
13  let timeoutId;
14  let elapsedTime = 0;
15
16  function countUp() {
17    const d = new Date(Date.now() - startTime + elapsedTime);
18    const m = String(d.getMinutes()).padStart(2, '0');
19    const s = String(d.getSeconds()).padStart(2, '0');
20    const ms = String(d.getMilliseconds()).padStart(3, '0');
21    timer.textContent = `${m}:${s}.${ms}`;
22
23    timeoutId = setTimeout(() => {
24      countUp();
25    }, 10);
26  }
27
28  function setButtonStateInitial() {
29    start.disabled = false;
30    stop.disabled = true;
31    reset.disabled = true;
32  }
33
34  function setButtonStateRunning() {
35    start.disabled = true;
36    stop.disabled = false;
37    reset.disabled = true;
38  }
39
40  function setButtonStateStopped() {
41    start.disabled = false;
42    stop.disabled = true;
43    reset.disabled = false;
44  }
45
46  setButtonStateInitial();
47
48  start.addEventListener('click', () => {
49    setButtonStateRunning();
50    startTime = Date.now();
51    countUp();
52  });
53
54  stop.addEventListener('click', () => {
55    setButtonStateStopped();
56    clearTimeout(timeoutId);
57    elapsedTime += Date.now() - startTime;
58  });
59
60  reset.addEventListener('click', () => {
61    setButtonStateInitial();
62    timer.textContent = '00:00.000';
63    elapsedTime = 0;
64  });
65
66 
67  math.addEventListener('click', () => {
68    stop.click();
69    let timeTxt = timer.textContent.replace(":", "").replace(".", "");
70    // let timeresult = "#time1"||"#time2"||"#time3";
71    // let timeresult = str;
72    selectElement.addEventListener('change',(event) =>{
73      const timeresult = timeselect;
74    });
75    switch (timeresult) {
76        case "time_1":
77          const a =180000 - timeTxt;
78          console.log(a)
79          break;
80        case "time_2":
81          const b =360000 - timeTxt;
82          console.log(b)
83          break;
84        case  "time_3":
85          const c =540000 - timeTxt;
86          console.log(c);
87          break;
88    } 
89}

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

miyabi_pudding

2020/09/22 09:41

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

kobayashi.j

2020/09/22 09:45

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

行動規範の内容に同意します

回答3件

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

投稿2020/09/22 10:45

yambejp

総合スコア116724

ベストアンサー

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

html
1<select name="mintus" id="mintus" class="mintus">
2      <option value="time_1" id="time1">30</option>
3      <option value="time_2" id="time2">60</option>
4      <option value="time_3" id="time3">90</option>
5</select>

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

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

javascript
1mintus.addEventListener('change', () => {
2    stop.click();
3
4    let timeTxt = timer.textContent.replace(":", "").replace(".", "");
5    
6    switch (mintus.value) {
7        case "time_1":
8          const a =180000 - timeTxt;
9          console.log(a)
10          break;
11        case "time_2":
12          const b =360000 - timeTxt;
13          console.log(b)
14          break;
15        case  "time_3":
16          const c =540000 - timeTxt;
17          console.log(c);
18          break;
19    }
20});

投稿2020/09/22 10:17

miyabi_pudding

総合スコア9555

修正点1 html

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

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

修正点2 Javascript

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

Javascript
1        math.addEventListener('click', () => {
2            stop.click();
3            let timeTxt = timer.textContent.replace(":", "").replace(".", "");
4            const selectedNum = minutes.selectedIndex;
5            switch (selectedNum) {
6                case 0:
7                    const a = 180000 - timeTxt;
8                    console.log(a)
9                    break;
10                case 1:
11                    const b = 360000 - timeTxt;
12                    console.log(b)
13                    break;
14                case 2:
15                    const c = 540000 - timeTxt;
16                    console.log(c);
17                    break;
18            }
19        });

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

html
1
2<!DOCTYPE html>
3<html lang="ja">
4
5<head>
6    <meta charset="utf-8">
7    <title>Stopwatch</title>
8<link rel="stylesheet" href="styles.css">
9</head>
10
11<body>
12    <div id="timer">00:00.000</div>
13    <button id="start">Start</button>
14    <button id="stop">Stop</button>
15    <button id="reset">Reset</button>
16    <form name="form">
17        <select name="minutes" id="minutes">
18            <option value="time_1" id="time1">30</option>
19            <option value="time_2" id="time2">60</option>
20            <option value="time_3" id="time3">90</option>
21        </select>
22    </form>
23    <div>
24        <button id="sum">計算</button>
25        <input type-text id="sum_account">
26    </div>
27    <script>
28        const timer = document.getElementById('timer');
29        const start = document.getElementById('start');
30        const stop = document.getElementById('stop');
31        const reset = document.getElementById('reset');
32        const math = document.getElementById('sum');
33        const minutes = document.getElementById('minutes');
34
35        let startTime;
36        let timeoutId;
37        let elapsedTime = 0;
38
39        function countUp() {
40            const d = new Date(Date.now() - startTime + elapsedTime);
41            const m = String(d.getMinutes()).padStart(2, '0');
42            const s = String(d.getSeconds()).padStart(2, '0');
43            const ms = String(d.getMilliseconds()).padStart(3, '0');
44            timer.textContent = `${m}:${s}.${ms}`;
45
46            timeoutId = setTimeout(() => {
47                countUp();
48            }, 10);
49        }
50
51        function setButtonStateInitial() {
52            start.disabled = false;
53            stop.disabled = true;
54            reset.disabled = true;
55        }
56
57        function setButtonStateRunning() {
58            start.disabled = true;
59            stop.disabled = false;
60            reset.disabled = true;
61        }
62
63        function setButtonStateStopped() {
64            start.disabled = false;
65            stop.disabled = true;
66            reset.disabled = false;
67        }
68
69        setButtonStateInitial();
70
71        start.addEventListener('click', () => {
72            setButtonStateRunning();
73            startTime = Date.now();
74            countUp();
75        });
76
77        stop.addEventListener('click', () => {
78            setButtonStateStopped();
79            clearTimeout(timeoutId);
80            elapsedTime += Date.now() - startTime;
81        });
82
83        reset.addEventListener('click', () => {
84            setButtonStateInitial();
85            timer.textContent = '00:00.000';
86            elapsedTime = 0;
87        });
88
89        math.addEventListener('click', () => {
90            stop.click();
91            let timeTxt = timer.textContent.replace(":", "").replace(".", "");
92            const selectedNum = minutes.selectedIndex;
93            switch (selectedNum) {
94                case 0:
95                    const a = 180000 - timeTxt;
96                    console.log(a)
97                    break;
98                case 1:
99                    const b = 360000 - timeTxt;
100                    console.log(b)
101                    break;
102                case 2:
103                    const c = 540000 - timeTxt;
104                    console.log(c);
105                    break;
106            }
107        });
108
109    </script>
110</body>
111
112</html>
113