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>

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

• javascript
• html
• css
• dom-events

• 1 What is catchID()? – Blazemonger Commented Apr 9, 2015 at 14:35
• 1 Unfortunately, the style.width does not give you the percentage that is ing from the CSS. – jwatts1980 Commented Apr 9, 2015 at 14:38
• 1 The .style object only has styles that are applied directly on the element. Styles implied by CSS rules won't be available there. – Pointy Commented Apr 9, 2015 at 14:39
• @Blazemonger My bad, catchID() is just my own function to get ID element. I have fix the right code. – Star Light Commented Apr 9, 2015 at 14:41
• @jwatts1980 I did try on w3schools./jsref/prop_style_width.asp and it working pretty well with other HTML code. – Star Light Commented Apr 9, 2015 at 14:44

3 Answers 3

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 ments: http://jsfiddle/a9okwLd1/1/

This bit is kinda messy:

catchID('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 + '%';
}

Also, what is catchID()?

Try this:

document.querySelector('a.knob').addEventListener('click', function() {
    var elem = document.getElementById('x');
    elem.offsetWidth = .99 * elem.offsetWidth;
}, false);

Try like so:

var w=document.getElementById("x").offsetWidth,
r=parseInt(w*.01);
document.getElementById("a").addEventListener("click",function(){
    w-=r;
    document.getElementById("x").style.width=w+"px";
},0);