html5のprogressタグについて

閲覧ありがとうございます。
現在html5のprogressタグを使用して進捗状況を表すプログレスバーを勉強で作成しています。
作成中下記について不明点がありますのでご教授いただきたく存じます。

前提・実現したいこと

プログレスバーの進捗状況によってバーの色を変更したいです。

発生している問題・エラーメッセージ

デフォルトのバーの色を変更することはできましたが、js内部で定義しているprogressの値によってcssに変更をかけることができないです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
6        <meta name="description" content="勉強用プログレスバーページです。">
7        <title>プログレスバー</title>
8        <link rel="stylesheet" type="text/css" href="index.css">
9        <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
10    </head>
11    <body>
12        <div class="contents">
13            <div class="progress">
14                <label class="progress__ttl">進捗状況</label>
15                <progress id="js_progress__bar" class="progress__bar" max="100" value="10"></progress>
16                <div id="js_progress__result" class="progress__result"></div>
17                <div class="progress__btn">
18                    <button id="js_progress__btn__plus" class="progress__btn__plus" type="button" name="plus">+</button>
19                    <button id="js_progress__btn__minus" class="progress__btn__minus" type="button" name="minus">-</button>
20                </div>
21            </div>
22        </div>
23        <script type="text/javascript" src="./js/index.js"></script>
24    </body>
25</html>

css
1@charset "UTF-8";
2
3* {
4  padding: 0;
5  margin: 0;
6}
7body {
8  color: #333;
9  letter-spacing: 1px;
10}
11.contents {
12  width: calc(100% - 4%);
13  margin: 4% 2%;
14}
15.progress {
16  width: 30%;
17  margin-top: 2%;
18}
19.progress__ttl {
20  font-weight: bold;
21}
22.progress__bar {
23  display: block;
24  height: 10vh;
25  width: 100%;
26  border: 1px solid #333;
27}
28progress::-moz-progress-value {
29  background: green;
30}
31progress::-moz-progress-bar {
32  background: #fff;
33}
34progress::-webkit-progress-value {
35  background: green;
36}
37progress::-webkit-progress-bar {
38  background: #fff;
39}
40.progress__result {
41  text-align: center;
42}
43.progress__btn {
44  text-align: center;
45  margin-top: 3%;
46}
47.progress__btn__plus {
48  color: #fff;
49  font-size: 2em;
50  background-color: #f00;
51  border: 1px solid #333;
52  border-radius: 0.2em;
53  box-sizing: border-box;
54  padding: 0 0.3em;
55  margin-right: 6%;
56  cursor: pointer;
57}
58.progress__btn__minus{
59  color: #fff;
60  font-size: 2em;
61  background-color: #00f;
62  border: 1px solid #333;
63  border-radius: 0.2em;
64  box-sizing: border-box;
65  padding: 0 0.4em;
66  cursor: pointer;
67}
68

js
1$(function() {
2  //プログレスバーの初期値を設定
3  let progress = 10;
4  //プログレスバーの進捗率を表示
5  $('#js_progress__result').text($('#js_progress__bar').val());
6
7  var longpress = 50; //長押し判定定義
8  var timer;
9  var touch_time = 0;
10  // +ボタン処理
11  $( "#js_progress__btn__plus" ).on('mousedown', function(e) {
12      timer = setInterval(function(){
13        //長押し時の処理
14          touch_time += 100;
15          console.log('長押しだよ');
16          progress = progress + 1;
17          $('#js_progress__bar').attr('value', progress);
18          if( progress >= 99) {
19            progress = 100;
20            $('#js_progress__bar').val(100);
21          }
22          //プログレスバーの進捗率を表示
23          $('#js_progress__result').html($('#js_progress__bar').val());
24      }, longpress);
25  }).on('mouseleave', function(e) {
26      clearInterval(timer);
27      touch_time = 0; //長押し判定初期化
28      //プログレスバーの進捗率を表示
29      $('#js_progress__result').html($('#js_progress__bar').val());
30  }).on('mouseup', function(e) {
31      clearTimeout(timer);
32      if(touch_time < 1000){
33        // 短いタップでの処理
34        console.log('クリックだよ');
35        progress = progress + 9;
36        if( progress >= 90) {
37          //進捗100以上の場合は進捗を進行させない
38          progress = 100;
39          $('#js_progress__bar').val(100);
40        }
41        $('#js_progress__bar').attr('value', progress);
42      }
43      touch_time = 0; //長押し判定初期化
44      //プログレスバーの進捗率を表示
45      $('#js_progress__result').html($('#js_progress__bar').val());
46  });
47  // -ボタン処理
48  $("#js_progress__btn__minus").on('mousedown', function(e) {
49      timer = setInterval(function(){
50        //長押し時の処理
51          touch_time += 100;
52          progress = progress - 1;
53          $('#js_progress__bar').attr('value', progress);
54           if( progress <= 9) {
55             //進捗0以下の場合は進捗を退行させない
56             progress = 0;
57             $('#js_progress__bar').val(0);
58           }
59          //プログレスバーの進捗率を表示
60          $('#js_progress__result').html($('#js_progress__bar').val());
61      }, longpress);
62  }).on('mouseleave', function(e) {
63      clearInterval(timer);
64      //プログレスバーの進捗率を表示
65      $('#js_progress__result').html($('#js_progress__bar').val());
66  }).on('mouseup', function(e) {
67      clearTimeout(timer);
68      if(touch_time < 200){
69        // 短いタップでの処理
70        console.log('クリックだよ');
71        progress = progress - 9;
72        $('#js_progress__bar').attr('value', progress);
73        if( progress <= 9) {
74          //進捗0以下の場合は進捗を退行させない
75          progress = 0;
76          $('#js_progress__bar').val(0);
77        }
78        //プログレスバーの進捗率を表示
79        $('#js_progress__result').html($('#js_progress__bar').val());
80      }
81      touch_time = 0; //長押し判定初期化
82  });
83
84  //プログレスバー配色変更処理
85  if (progress >=20) {
86    //20以上
87    $('.progress_bar').css('background', 'yellow;');
88  }if (progress >=50) {
89    //50以上
90    $('.progress_bar').css('background', 'blue;');
91  }
92});
93

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

回答1件

ベストアンサー

JSコードの.css('background', 'yellow;');のyellow;は;が余分です。
その上で、以下のようにすれば解決するはずです。

html
1<div id="js_progress__result" class="progress__result"></div>
2<!-- 上記を下記に差し替え -->
3<input type="number" id="js_progress__result" class="progress__result" readonly>

css
1.progress__result {
2  text-align: center;
3  /* 以下はお好みで調整してください。 */
4  border: none;
5  appearance: textfield;
6}

jQuery
1  $('#js_progress__result').html($('#js_progress__bar').val());
2  // 上記を全て下記に変更
3  $('#js_progress__result').val($('#js_progress__bar').val()).change();
4
5  //プログレスバー配色変更処理 のところを下記に変更
6  $('#js_progress__result').on('change', function(){
7	  if (progress >=20) {
8	    //20以上
9	    $('.progress__bar').css('background', 'yellow');
10	  }if (progress >=50) {
11	    //50以上
12	    $('.progress__bar').css('background', 'blue');
13	  }
14  });