постоянного обновления HTML отображения JS переменной

Question

Так вот то, что у меня есть в виде HTML

<div class="circle" >2000</div> 
<div class="circle" >20</div> 

и вот CSS

.circle { 
    width:50px; 
    height:50px; 
    border:3px solid green; 
    border-radius:250px; 
    line-height:50px; 
    text-align:center; 
    display:inline-block; 
} 

У меня есть .js страницы, которая в общей сложности списка из всех возможных переменных для этой игры я делаю.

То, что я ищу, - это способность каждой переменной присваивать круг с помощью режима реального времени/быстрого обновления того, что значение переменных из globalvars.js.

Я читал, что это возможно сделать, в том числе идентификатор в DIV, как этот <div class="circle" id=XXXXX></div> однако я не смог сделать эту работу и хотел бы знать, если это был только я глуп или что-то еще. Я относительно новичок в программировании, поэтому ценим любую конструктивную критику!

Answer 1

Вы можете сделать это легко с помощью AngularJS expressions. Однако, если вы не знаете, AngularJS, вот простой пример JS:

Да, вы можете добавить id к <div> так же, как вы делали с class.

<div id="display"></div> 

Теперь, каждый раз, когда переменная обновления, вы можете обновить значение <div>, выбрав его с JS и изменение его innerHTML свойство:

document.getElementById("display").innerHTML = var_name; 

Например, вы можете увидеть это simplistic example на JSFiddle, чтобы увидеть пример того, как он работает.

Answer 2

создать обновление функции. обновите свойства, используя document.getElementById("elementID").innerHTML = variable внутри этой функции. Я предпочитаю использовать setTimeout вместо setInterval, так как он позволяет взаимодействовать друг с другом.