前提・実現したいこと

クイズのプログラムを作成してまして、制限時間まではsetIntervalで表示させることができました。そして制限時間時にバーを表示させて時間が減るごとにバーも減らし、また表示させたいです。

##以下のエラーメッセージが発生しました。

sample.html:37 Uncaught SyntaxError: Invalid left-hand side in assignment

該当のソースコード

<!DOCTYPE html> <html> <meta charset='UTF-8'>  <body> <div id='idTimeGauge' style='background: #0f0; width: 100%;' > <br> </div> <button type="button" id='start'>Start</button><br> <button type="button" id='stop'>Stop </button><br> <button type="button" id='reset'>Reset</button> <script> oTimeGauge = document.getElementById('idTimeGauge'); oCmpSte_TimeGauge = getComputedStyle(oTimeGauge); nTimeGaugeMax = parseInt('http://oTimeGauge.style.width'); console.log('nTimeGaugeMax:'+nTimeGaugeMax);

document.getElementById('start').addEventListener('click', function(e){
    SetTime(e);
});
document.getElementById('stop').addEventListener('click', function(e){
    StopTime(e);
});
document.getElementById('reset').addEventListener('click', function(e){
    ResetTime(e);
});

ResetTime(); 

function TimeCount(){   
    console.log('TimeCount()');   
    nTimeCount += nTimeInc;   
    let nRatio = nTimeCount/nTimeMax;

//ここでエラー
'http://oTimeGauge.style.width' = (nTimeGaugeMax*nRatio)+'%';
console.log('http://oTimeGauge.style.width:'+'https://t.co/Go961osTYl.width');
if(0<nTimeCount){
oTimeoutID = setTimeout(TimeCount, nTimePulse);
}
}

function SetTime(){  
    console.log('SetTime()');   
    ResetTime();   
    oTimeoutID = setTimeout(TimeCount, nTimePulse); 
} 

function ResetTime(){   
    console.log('ResetTime()');   
    StopTime();   
    //ここでエラー
    'http://oTimeGauge.style.width' = nTimeGaugeMax+'%';   
    nTimeMax = 150;   
    nTimeInc = -1;   
    nTimeCount = nTimeMax;   
    nTimePulse = 50; 
    //  ms 
} 

function StopTime(){  
    if("undefined"!==typeof(oTimeoutID)){     
        console.log('if("undefined"!==typeof(oTimeoutID))');     
        clearTimeout(oTimeoutID);   
    } 
}

</script> </body> </html>

試したこと

これも教えてもらったコードなのですが、相手方のパソコンでは動いたと言っていますが、自分のパソコンではちっとも動かなく、エラーがバンバン出てきました。
正直
nTimeGaugeMax = parseInt('http://oTimeGauge.style.width'); とか
'http://oTimeGauge.style.width' = (nTimeGaugeMax*nRatio)+'%';
は何しているか分かっていません。こんなにわかですが教えてくれるでしょうか。
もちろん上記の方法ではなくても自分のパソコンで動けば問題ありません！解説もあればうれしいです。

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

バージョンなどもわかりませんが自分はファイルを作り、そこで新規作成し、htmlファイル？を作りました。そのファイルをVSコードで開きプログラムをしています。

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

回答1件

htmlタグでprogressというのがあるからそれを使った方が楽かな？と。
jQueryで要素のvalを取得して、一定時間ごとにvalを減らしていくだけの簡単なお仕事です。

sample
1<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2<progress id="time_limit" min="0" max="366" value="366"></progress>
3<button onclick="countDown();">たーいむしょっく</button>
4<script>
5let timer = $('#time_limit');
6function countDown() {
7	if (timer.val() > 0 ) {
8		timer.val(timer.val() - 1);
9		setTimeout(countDown, 40);
10	}
11}
12</script>

以下蛇足です。
素のjavascriptのサンプルコードを見つけたので、
そのままパクるのも失礼かと思いjQueryに書き換えてみました。
元のコードをご覧になられたい方は以下のURLをご覧くださいませ～
※setIntervalに変更しようかとも思ったけども止まらないことがあるらしいのでやめました。

参考URL　とっちらか～る　JavaScriptとprogressタグによる進捗バーの表示
https://blog.ver001.com/javascipt-progress-bar/

さらに蛇足。
自分で書くのもな～と思い時短のために拾ってきたのだけど、
結局書き直したので意味が無かったということに気が付いた。

投稿2021/03/14 08:39

編集2021/03/14 08:45