Изменение процентной доли id с помощью javascript

Я пытаюсь закодировать процентную панель цели. Кажется, я не могу изменить процент ширины #bar в javascript. Любой совет?? Извините за грязный код. У меня есть причина для -20 * -1. Мне просто нужно сосредоточиться на изменении процента ширины id.Изменение процентной доли id с помощью javascript

CSS:

.graph { 
    width: 500px; /* width and height are arbitrary, just make sure the #bar styles are changed accordingly */ 
    height: 30px; 
    border: 1px solid #888; 
    background: rgb(168,168,168); 
    position: relative; 
} 
#bar { 
    height: 29px; /* Not 30px because the 1px top-border brings it up to 30px to match #graph */ 
    width: 34%; 
    float: left; 
    background: rgb(255,197,120); 
    border-top: 1px solid #fceabb; 
}

JS:

var _first = -20 * -1; 
var _second = 150; 
var _third = _first/_second * 100; 
document.getElementById('bar').style.width = _third + "%";

HTML:

<center><div id="progress" class="graph"><div id="bar"></div></div></center>

источник

2016-02-22 BNichols

Что вы видите на дисплее? – Derek

Вы пытались переместить код 'script' в конец вашего HTML? Я думаю, что 'document.getElementById' не находит элемент' # bar'. Я бы рекомендовал поместить его в событие загрузки или что-то еще. – Quantastical

Вам нужно переместить скрипт после html, потому что в то время, когда вы пытаетесь получить div с id * bar *, он пока не отображается. – xxxmatko

Ваш код указан справа. Просто не в порядке. Когда ваш JavaScript пытается манипулировать DOM, он еще не создан браузером. Есть два способа сделать это, и вот как я это делаю. Мне нравится этот путь, потому что нет необходимости вызывать дополнительную функцию, чтобы ждать создания DOM.

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <style> 
     .graph { 
      width: 500px; 
      height: 30px; 
      border: 1px solid #888; 
      background: rgb(168,168,168); 
      position: relative; 
     } 
     #bar { 
      height: 29px; 
      width: 34%; 
      float: left; 
      background: rgb(255,197,120); 
      border-top: 1px solid #fceabb; 
     } 
    </style> 
    <!-- The HTML needs to come before the JavaScript. That way 
      the DOMS are created for the JavaScript --> 
    <center> 
     <div id="progress" class="graph"> 
      <div id="bar"></div></div> 
    </center> 

    <script> 
     var _first = -20 * -1; 
     var _second = 150; 
     var _third = _first/_second * 100; 
     document.getElementById('bar').style.width = _third + "%"; 
    </script> 
</body> 
</html>

источник

2016-02-22 20:14:23

Я знал, что это будет что-то вроде этого. Ошибка новичков. Благодаря! – BNichols

Добро пожаловать, BNicholas. Пожалуйста, поддержите мой ответ :) –

Поскольку JS загружается до DOM является готов он не смог найти div Withe идентификатора bar, который еще не загружен, вы должны поместить свой код внутри onload функции:

window.onload=function(){ 
    var _first = -20 * -1; 
    var _second = 150; 
    var _third = _first/_second * 100; 

    document.getElementById('bar').style.width = _third + "%"; 
}

Надеются, что это помогает.

источник

2016-02-22 19:20:48

Изменение процентной доли id с помощью javascript

ответ

Смежные вопросы