Question

176

Dynamic progress bar Javascript and HTML

rated 0 times [ 180] [ 4] / answers: 1 / hits: 20307 / 13 Years ago, thu, march 15, 2012, 12:00:00

I am trying to create a dynamic bar in HTML using javascript.
I have create the button but cannot seem to pass the value over to the progress bar.
Can someone please help me? thanks!

<button onclick=increase()>Add</button> 

<button onclick=decrease()>Minus</button> 

<input type=text id=tb> 

<script type=text/javascript> 

var value = 0 document.getElementById(tb).value = value; 

function increase(){ 

  this.value = value + 1; document.getElementById(tb).value=value;     

} 

function decrease(){ 

  this.value = value - 1; document.getElementById(tb).value=value; 

} 

document.write(<div class='meter'><span style='width: 30%'></span> </div>);

document.write(<input type='text' id=tb>+value + </input>); 

</script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

randall

Add To Favorites

Follow

Total Points: 492

Total Questions: 99

Total Answers: 103

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

randall questions

1 Cannot create sitemaps on nextjs with next-sitemap

Wed, Mar 16, 22, 00:00, 2 Years ago

1 React Material-UI Select using an array of objects as the source

Mon, Mar 29, 21, 00:00, 3 Years ago

1 How to chain cy.get in cypress

Tue, Nov 10, 20, 00:00, 4 Years ago

1 Vue Composition API: Is there a better way in calling `emit` inside consumable file?

Mon, Nov 9, 20, 00:00, 4 Years ago

1 Router view on Vue 3 doesn't catch event from child

Sat, Oct 31, 20, 00:00, 4 Years ago

View All

answered 13 Years ago samir · Accepted Answer

It'd be easier to do this in jQuery, but here it goes with POJS:

js:

var value = 0, 

tb = document.getElementById(tb),

progress = document.getElementById(progress); //store these, it's better

function increase(){ 

  value++;// same as value += 1, but better

  if(value>=100) value = 100;//keep it under 100%

  tb.value = value;// set the value of the text field     

  progress.style.width = value + %;// set the width of the progress bar

} 

function decrease(){ 

  value--;

  if(value<=0) value = 0;//keep it over 0%

  tb.value = value; 

  progress.style.width = value + %;

}

document.write is janky, so I ditched that & put the bar in the markup.

html:

<button onclick=increase()>Add</button> 

<button onclick=decrease()>Minus</button> 

<input type=text id=tb> 

<div id='meter'><div id='progress'></div></div>

css:

#meter {border:1px solid #000;width:100px}

#progress {background:#333;height:10px;width:0%}

fiddle: http://jsfiddle.net/sw95b/