html - My div won't change width with my javascript function -

i have made makeshift progress bar 2 divs, styled css fit 1 in make progress bar. have button changes width of inside div go when click button, button click not change width of div. made sure made no errors, javascript console in chrome browser gives no errors when click button. anyways, here code:

function clickme() {    var newexp = parseint(document.getelementbyid("exphold").innerhtml);    document.getelementbyid("bar2").style.width = newexp + 'px';    document.getelementbyid("exphold").innerhtml += '+1';    document.getelementbyid("exphold").innerhtml = eval(document.getelementbyid("exphold").innerhtml);  }

#bar1 {    border: 2px solid gold;    height: 15px;    width: 100px;    background-color: blue;    border-radius: 8px;  }  #bar2 {    height: 15px;    width: 1px;    background-color: skyblue;    border-radius: 8px;  }

<div id="bar1">    <div id="bar2">    </div>  </div>  <p>    <input type="button" value="click me" onclick="clickme()" />    <span id="exphold" style="color:black;">1</span>

i appreciate telling me doing wrong, thanks!

1. please not use inline javascript. reduces readability , maintainability.
2. you should use javascript variable store exp, way don't have repeatedly query dom, process intensive.
3. you should cache dom objects instead of creating new ones on each iteration.
4. you can increment created exp variable using prefix increment modifier
   • the prefix increment modifier return incremented value.
   • the postfix increment modifier return value before incrementing.

var exp = 0, current;  var bar1 = document.getelementbyid("bar1");  var bar2 = document.getelementbyid("bar2");  var hold = document.getelementbyid("exphold");  var max = bar1.clientwidth;  document.getelementbyid('my-button').onclick = function() {    // don't go past end.    if(bar2.clientwidth < max) {      current = ++exp;      hold.textcontent = current;      bar2.style.width = current + 'px';    }  }

#bar1 {    border: 2px solid gold;    height: 15px;    width: 100px;    background-color: blue;    border-radius: 8px;  }  #bar2 {    height: 15px;    width: 0px;    background-color: skyblue;    border-radius: 8px;  }

<div id="bar1">    <div id="bar2">    </div>  </div>  <p>    <input type="button" value="click me" id="my-button" />    <span id="exphold" style="color:black;">0</span>