HTML класс стиля с идентификатором?

Question

В настоящее время у меня есть рабочий сайт, содержащий индикатор выполнения, используя Bootstrap. У меня также есть идентификатор, который загружает данные из URL JSON в следующем формате: http://api.bfhstats.com/api/playerInfo?plat=pc&name=1ApRiL&output=js

В верхней части моей странице у меня есть следующий код для индикатора выполнения:

<div class="progress"> 
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 60%" id="progressbar">60% 
</div> 
</div> 

и сценарий в дно:

document.getElementById("progressbar").innerHTML = data["player"]["rank"]["next"].relProg+'%'; 



       } 

индикатор выполнения извлекает данные, необходимые в строчном формате, так что поэтому он правильно показывает% от JSON, однако это не меняет ширину стиля. Проблема дефинативно в теге стиля, и я пробовал такие вещи, как

style="width: #progressbar" 

Однако это не работает. Кажется странным, что текст работает, но не фактическая ширина.

Answer 1

Вы должны вручную изменить ширину индикатора выполнения, используя document.getElementById("progressbar").style.width после получения данных о прибытии percentage с сервера.

Чтобы изменить ширину стиля:

var percentage = data["player"]["rank"]["next"].relProg, 
    progressbar = document.getElementById("progressbar"); 

progressbar.innerHTML = percentage+'%'; 
progressbar .style.width = percentage+'%'; 

Answer 2

Вы меняете innerHTML не стиль элемента. Вы можете попробовать что-то вроде:

var x = document.getElementById("progressbar"); 
x.innerHTML = ....; // change the inner HTML 
x.style.width = ...; // change the width... 

Answer 3

.style.width = data["player"]["rank"]["next"].relProg+'%'; 

сделать его строку, если потребности.

Answer 4

var progressbar = document.getElementById("progressbar"); 
var yourWidth = data["player"]["rank"]["next"].relProg+'%'; 
progressbar.innerHTML = progressbar.style.width = yourWidth;