Can’t get width property with JavaScript

My idea is when I click on the button, the div#x will lose 1% of width. Here is my code:

document.querySelector('#a').onclick = function() {
    var
        lost = document.querySelector('#x').style.width,
        lost = lost.slice(0, -1);
    lost = Number(lost);
    lost -= 1;
    document.querySelector('#x').style.width = lost + '%';
}

nav#control {
    display: flex;
    flex-basis: 50px;
    align-items: center;
    justify-content: center;
    background: #FFF;
    padding: 5px;
    width: 100%
}

.knob {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    cursor: pointer
}

#b {
    position: relative;
    flex-grow: 1;
    background: #EFEFEF;
    margin: 0 10px;
    height: 30px
}
#x {
    position: absolute;
    background: #4C8EFA;
    width: 100%; height: 30px;
    border-radius: 1px;
    z-index: 2
}
#c {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
}

<nav id='control'>
    <section id='a' class='knob'><img src='x.png'/></section>
    <section id='b'>
        <div id='x'></div>
        <div id='c'>background</div>
    </section>
    <section id='d' class='knob'><img src='x.png'/></section>
</nav>

The blue bar (div#x) is supposed to be shorter 1% every time I click on the left button (section#a). I have check so many times but I still don’t know what problem with my code. I did change some code and I think that problem is in this line lost = document.querySelector('#x').style.width because it seems like it doesn’t return any value which is supposed to gimme 100% width of div#x

Answer

Give this a shot:

var x = document.querySelector('#x');
var initialWidth = x.clientWidth;

window.onresize = function() {
  //Be careful about calculating too many things in the resize handler!
  //This isn't that intensive, so it shouldn't matter, but look into "debouncing" if you have things like this elsewhere
  initialWidth = x.clientWidth;
};

document.getElementById("a").onclick = function() {
  x.style.width = x.clientWidth - (initialWidth * 0.01) + "px";
};

nav#control {
  display: flex;
  flex-basis: 50px;
  align-items: center;
  justify-content: center;
  background: #FFF;
  padding: 5px;
  width: 100%
}
.knob {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer
}
#b {
  position: relative;
  flex-grow: 1;
  background: #EFEFEF;
  margin: 0 10px;
  height: 30px
}
#x {
  position: absolute;
  background: #4C8EFA;
  width: 100%;
  height: 30px;
  border-radius: 1px;
  z-index: 2
}
#c {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}

<nav id='control'>
  <section id='a' class='knob'>
    <img src='x.png' />
  </section>
  <section id='b'>
    <div id='x'></div>
    <div id='c'>background</div>
  </section>
  <section id='d' class='knob'>
    <img src='x.png' />
  </section>
</nav>

This uses clientWidth to get the real width of the element (in terms of pixels), takes 1% off that number, then reset the number back to pixels again.

Explanation:

In your original code, you were trying to access style.width of #x. Since this is a percentage, and not a static value, this will actually return nothing. Luckily, we can get the rendered width of the element with Javascript’s clientWidth property. Using this, we can find the real size of the bar, and calculate the new values from that.

It also might be possible to directly inject the CSS with insertRule – but I don’t see any problems with the clientWidth solution.

EDIT: Use @jwatts1980’s solution from the comments: http://jsfiddle.net/a9okwLd1/1/