progressbar(jQuery)の進捗を、ファイルに書き込んだ数値で反映させたいが出来ない

前提・実現したいこと

プログラム初心者で、JavaScriptとjQueryを独習しているものです。
いまjQueryのajaxを使ってファイルの値を読み取り、進捗バーを更新させようとしています。
プログラムとしては、以下の内容となっています。

ブラウザにボタンを表示
ボタンを押すと進捗バーが表示
テキストファイル(counter.txt)を手動で更新
本来なら進捗バーが変更されるはずだが変化なし

自分のJavaScript（ajax）に対する理解の問題だと思うのですが、どのポイントが問題なのかすら分かりません。
せめて問題点でも明確になれば、解決の糸口がつかめると思っています。

発生している問題

問題なく数値は読み込むことはできるのですが、progressbarに反映されずに困っています。

該当のソースコード

html
1test_progress.html
2
3<!DOCTYPE html>
4<html>
5
6<head>
7  <meta charset="UTF-8" />
8  <title>Progressbar</title>
9</head>
10
11<body>
12  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
13  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
14  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
15
16  <script type="text/javascript", src="test_progress.js"></script>
17
18  <div style="background-color:lightblue; padding:20px 20px 10px;">
19    <input type="button" id="btnStart" value="スタート">
20    <div id="progressBar"></div>
21    <div id="progressNumber" style="bottom:10px;"></div>
22  </div>
23</body>
24
25</html>

javascript
1test_progress.js
2
3var val = 0
4
5$(function () {
6    $("#btnStart").click(function () {
7        $("#progressBar").progressbar({
8            value: 0,
9            max: 100,
10            change: function () {
11                $("#progressNumber").text($("#progressBar").progressbar("value") + "%");
12            },
13            complete: function () {
14                $("#progressNumber").text($("#progressBar").progressbar("value") + "%　完了");
15            }
16        });
17        var id = setInterval(function () {
18            $.ajax({
19                url: "counter.txt",
20                dataType: "text",
21                cache: false,
22            })
23                .then(
24                    function (progress_number) {
25                        val = progress_number
26                        console.log("成功", val, progress_number);
27                        $("#progressBar").progressbar("value", val);
28                    },
29                    function () {
30                        console.log("失敗", val);
31                    }
32                );
33            // $("#progressBar").progressbar("value", val);
34            if (val >= 100) { clearInterval(id) }
35            // 500ミリ秒おきに更新
36        }, 500);
37    });
38});
39

txt
1counter.txt
2
30

試したこと

progressbar関数をいろいろなところに置いてみましたが、問題は改善しませんでした。

補足情報（FW/ツールのバージョンなど）

Google Chrome（最新）
Windows 10

Server
python3.9のHTTPServer

int32_t

2021/04/14 09:39 編集

> console.log("成功", val, progress_number); この行の出力は期待どおりコンソールに出ていますか? HTTPServerへのアクセスは期待通り500ms毎に発生していますか?

Akihiro_py

2021/04/14 09:44

早速の質問、ありがとうございます。はい、以下が継続して連続出力されています。＞成功 0 ＞0 またcounter.txtの値を変えたらそのまま反映されます。

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

回答1件

ベストアンサー

js
1function (progress_number) {
2    val = progress_number

$.ajax()の結果は文字列になっているはずなので、数値に変換しましょう。

js
1function(progress_number) {
2    val = Number(progress_number);

投稿2021/04/14 09:51

int32_t

総合スコア20884

Akihiro_py

2021/04/14 10:08

大変ありがとうございます！！文字列になっているとは気が付きませんでした。指摘して頂いて原因が分かると、なんと初歩的なミスで！！と思いますがこれがなかなか難しいです。もう少し修行が必要ですね。今回は本当にありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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