私は何が間違っていますか？ StreamLabs/Twitchアラート用のJSとCSSを使用したHTMLでプログレスバーを作成する

Question

先にありがとうございます。

私はこのサイトにtweet streamersのStreamLabsと呼ばれています。カスタムHTML、CSS、& JSを使用して外観をカスタマイズする方法を紹介しました。

彼らには、「ストリームボス」と呼ばれるものがあり、それに続く、サブ、および/または寄付するユーザーに反応します。

このプログレスバーが表示されます。

HTML：：

 <!-- All html objects will be wrapped in the #wrap div --> 
     <div class='boss_cont'> 
     <div id='username'></div> 
     <div class='user_pic_cont'> 
      <img id='user_pic' src=''\> 
     </div> 
     <div id='user_hp_cont'> 
      <span id='current_health'>0</span>/<span id='total_health'>0</span> 
     </div> 
     <div id='message'> 
     </div> 
     </div> 

CSS： "ちょっと関係ないこの時点で"

/* All html objects will be wrapped in the #wrap div */ 
     .boss_cont { 
      color:white; 
      background:black; 
     } 

JS：ここでは、コードのです「ここで重要なこと：すべての値がけいれんし、streamlabs APIを使用して予め定められています"

  // Events will be sent when the boss is damaged or killed. 
      // Please use event listeners to run functions. 
      document.addEventListener('bossLoad', function(obj) { 
      // obj.detail will contain information about the current boss 
      // this will fire only once when the widget loads 
      console.log(obj.detail); 
      $('#user_pic').attr('src', obj.detail.boss_img); 
      $('#current_health').text(obj.detail.current_health); 
      $('#total_health').text(obj.detail.total_health); 
      $('#username').text(obj.detail.boss_name); 
      }); 
      document.addEventListener('bossDamaged', function(obj) { 
      // obj.detail will contain information about the boss and a 
      // custom message 
      console.log(obj.detail); 
      $('#current_health').text(obj.detail.boss.current_health); 
      }); 
      // Similarly for for when a boss is killed 
      document.addEventListener('bossKilled', function(obj) { 
      console.log(obj.detail); 
      $('#username').text(obj.detail.boss.boss_name); 
      $('#user_pic').attr('src', obj.detail.boss.boss_img); 
      $('#current_health').text(obj.detail.boss.current_health); 
      $('#total_health').text(obj.detail.boss.total_health); 
     }); 

ここで、私がしようとしていることに行きましょう。

この基本コードには進捗バーはありませんが、作成する値とツールがあります。私がやろうとしている何

はまた

「をcurrent_healthとtotal_health」の値を使用してプログレスバーを作成し、私はHTMLのプログレスバーの最大値を設定する方法がわからないですJS。

マイコード：

HTML： 注：ボスの現在のHPが300分の295です。予め決められている。

<!-- All html objects will be wrapped in the #wrap div --> 
     <div class='boss_cont'> 
     <div id='username'></div> 
     <div class='user_pic_cont'> 
      <img id='user_pic' src=''> 
     </div> 
     <div id='user_hp_cont'> 
      <span id='current_health'>0</span>/<span id='total_health'>0</span> 
      <progress id='health' value="100" max="100"></progress> 
     </div> 
     <div id='message'> 
     </div> 
     </div> 

JS：

// Events will be sent when the boss is damaged or killed. 
      // Please use event listeners to run functions. 
      document.addEventListener('bossLoad', function(obj) { 
      // obj.detail will contain information about the current boss 
      // this will fire only once when the widget loads 
      console.log(obj.detail); 
      $('#user_pic').attr('src', obj.detail.boss_img); 
      $('#current_health').text(obj.detail.current_health); 
      $('#total_health').text(obj.detail.total_health); 
      $('#username').text(obj.detail.boss_name); 
      }); 
      document.addEventListener('bossDamaged', function(obj) { 
      // obj.detail will contain information about the boss and a 
      // custom message 
      console.log(obj.detail); 
      $('#current_health').text(obj.detail.boss.current_health); 
      $('#user_hp_cont progress').val(obj.detail.boss.current_health); 
      }); 
      // Similarly for for when a boss is killed 
      document.addEventListener('bossKilled', function(obj) { 
      console.log(obj.detail); 
      $('#username').text(obj.detail.boss.boss_name); 
      $('#user_pic').attr('src', obj.detail.boss.boss_img); 
      $('#current_health').text(obj.detail.boss.current_health); 
      $('#total_health').text(obj.detail.boss.total_health); 
     }); 

ボスが損傷した後、私も

// Sets a percentage value as a whole integer from 0 - 100 
var health = val.(obj.detail.boss.current_health/obj.detail.total_health) * 100; 
$('.progress').val(health); 

を設定しようとしました。

これらのすべては、試験寄付の活性化、以下、および/またはサブテストによって試験することができます。

もう1つの質問は、「はい」または「いいえ」です。 そのパーセンテージの値をCSSスタイルの幅に設定する方法はありますか？

Answer 1

私はここで最初の質問が分かりました。

プログレスバーの最大値は常に100にする必要があります。次に、そのCurrentHealth/TotalHealth * 100を使用して、そのバーのどれくらいを埋めるかを決定します。塗りつぶされた部分の幅をCurrentHealthに設定します/ TotalHealth * 100をパーセンテージで指定すると、プログレスバーが表示されます。病気を作ってください。

var totalHealth = 300; 
var currentHealth = 295; 
var healthProgress = currentHealth/totalHealth*100; 

ここで、healthProgressを要素の幅の割合として設定する必要があります。

ここで私が直接あなたのhtml /のJSを使用していませんでした https://jsfiddle.net/2Lsvxegs/5/

申し訳ありませんが、プロトタイプだ、それは次のように少し明確になるだろうと思いました。