Q&A
> console.log("成功", val, progress_number);
この行の出力は期待どおりコンソールに出ていますか?
HTTPServerへのアクセスは期待通り500ms毎に発生していますか?
前提・実現したいこと
プログラム初心者で、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
早速の質問、ありがとうございます。
はい、以下が継続して連続出力されています。
＞成功 0
＞0
またcounter.txtの値を変えたらそのまま反映されます。
回答1件
0
ベストアンサー
js
1function (progress_number) { 2 val = progress_number
$.ajax()の結果は文字列になっているはずなので、数値に変換しましょう。
js
1function(progress_number) { 2 val = Number(progress_number);
投稿2021/04/14 09:51
総合スコア21695
大変ありがとうございます！！
文字列になっているとは気が付きませんでした。
指摘して頂いて原因が分かると、なんと初歩的なミスで！！と思いますが
これがなかなか難しいです。
もう少し修行が必要ですね。
今回は本当にありがとうございました。
あなたの回答
tips
プレビュー
