CODEWITHSUNDEEP
javascripthtmlcss
Akmedrah
Akmedrah

Reputation: 69

continual update html display of js variable

So here is what I have by way of HTML

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

and here is the CSS

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

I have a .js page that is a total list of all may variables for this game I am making.

What i am looking for is the ability to have each variable assigned a circle with a real-time/rapidly updating view of what the variables value is from the globalvars.js.

I read that it was possibly to do by including an id in the div like this <div class="circle" id=XXXXX></div> however I was unable to make this work and wanted to know if it was just me being stupid or something else. I am relatively new to programming so any and all constructive criticism is appreciated!

Upvotes: 0

Views: 8033

Answers (2)

Sujeet Jaiswal
Sujeet Jaiswal

Reputation: 1089

create a function update. update the properties using document.getElementById("elementID").innerHTML = variable inside that function. I prefer using setTimeout instead of setInterval as it allows for user-interactions as well in-between.

Upvotes: 0

Jonathan Lam
Jonathan Lam

Reputation: 17351

You can do this easily with AngularJS expressions. However, assuming you don't know AngularJS, here is a plain JS example:

Yes, you can add an id to the <div> much like you did with class.

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

Now, every time the variable updates, you can update the value of the <div> by selecting it with JS and changing its innerHTML property:

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

For example, you can see this simplistic example on JSFiddle to see an example of how it works.

Upvotes: 2

Related Questions