プログレスバーの移動の計算

Question

ゲームの勝ち点を変更することができるので、プログレスバーを敏感にしたいと思います。さて、divの高さ全体に対するパーセンテージを受け取ります。 デフォルトのスコアは100ptsです。また、プログレスバーは0％（最小）〜100％（最大）（100pts - 勝利スコア）になるように設定されています。 プログレスバーをプログラムする方法を教えてください。たとえば、ユーザーが勝率50％、つまり100％を入力すると、プレーヤーが25ptに達したときに進行状況バーに彼はゲームの勝利の半分（50％）です。私の説明がはっきりしていれば幸いです。

HTML入力：優勝スコアを設定する

<input class="score-input" type="text"> 

機能（デフォルトでは100）、プレイヤーのスコアを読み込みプログレスバー要素のidと、それを反映し

function setWinningScore() { 
     let inputScore = document.querySelector('.score-input').value; 
      if (inputScore) { 
       winningScore = inputScore; 
      } else { 
       winningScore = 100; 
      } 
     } 

プログレスバーの機能。

function progressBar(myScore, progBarId) { 
    progBarId.style.height = myScore + '%'; 
} 

Answer 1

あなたはほとんどあなた自身の質問に答えました。

あなたは50のうち25が50％であることを知っているので、あなたはまた、あなたは、単に100を掛けすることができ、それはあなたのパーセントを与えることで25/50 = 0.5

ことを知っている必要があります。

0.5 * 100 = 50

ヨハン・カールソンが指摘したように、あなただけの次にあなたのprogressBar機能を置き換えます：

function progressBar(myScore, progBarId) { 
    progBarId.style.height = ((myScore/winningScore) * 100) + '%'; 
} 

私はあなたにも確認することによって、あなたのsetWinningScore機能が少しより安全にする必要があることを追加します与えられた入力が有効な正の数である、そうでなければいくつかの問題があるでしょう。

function setWinningScore() { 
     let inputScore = document.querySelector('.score-input').value; 
      if (typeof inputScore === 'number' && inputScore > 0) { 
       winningScore = inputScore; 
      } else { 
       winningScore = 100; 
      } 
     }