I don't know how to write a simple event listener to delete 5% od elements width every time the button is clicked. From 100% to 0%.

substracktBtn.addEventListener('click', function(){
    container.style.width = "calc("   container.style.width   " - 5%)";
})

In this code i got no errors but the div's width is still 100% after the clicks.

CodePudding user response：

This is your solution:

• It will remove 5% of the beginning width each time till you reach 0%. With the other solution you will never get to 0% because you always take the 5% of the current width.

const container = document.querySelector('div')
const button = document.querySelector('button')
const subtractPerClick = container.offsetWidth * 0.05

button.addEventListener('click', () => {
  if (container.offsetWidth - subtractPerClick > 0)
    container.style.width = container.offsetWidth - subtractPerClick   'px'
  else
    container.style.width = '0px'
})

div {
  height: 100px;
  width: 300px;
  background-color: darkblue;
}

<div></div>
<button>Substract</button>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

For removing 5% of the current width. This converges!

const container = document.getElementById('container');
const button = document.getElementById('button');

button.addEventListener('click', () => {
  container.style.width = container.offsetWidth * 0.95   'px'
})

#container {
  background-color: red;
  width: 200px;
  height: 100px;
}

<div id="container"></div>

<button id="button">Substract</button>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

For removing 5% of the starting width

const container = document.getElementById('container');
const button = document.getElementById('button');

let startWidth5Percent = container.offsetWidth * 0.05;

button.addEventListener('click', () => {
   container.style.width = container.offsetWidth - startWidth5Percent   'px';
})

#container {
  background-color: red;
  width: 200px;
  height: 100px;
}

<div id="container"></div>

<button id="button">Substract</button>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

• Use offsetWidth or clientWidth instead of container.style.width (which might be just an empty string)
• Add the missing px unit when using CSS calc

const EL_btn = document.querySelector("#btn");
const EL_container = document.querySelector("#container");

EL_btn.addEventListener("click", () => {
  EL_container.style.width = `calc(${EL_container.offsetWidth}px - 5%)`
});

#container {
  background: gold;
}

<button id="btn" type="button">CLICK ME</button>
<div id="container">Container</div>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

For a responsive era, my suggestion is to always set a width to the % unit instead:

const EL_btn = document.querySelector("#btn");
const EL_container = document.querySelector("#container");

EL_btn.addEventListener("click", () => {
  if (!("_w" in EL_container)) EL_container._w = 100;
  EL_container._w = Math.max(0, EL_container._w - 5);
  EL_container.style.width = `${EL_container._w}%`;
});

#container {
  background: gold;
}

<button id="btn" type="button">CLICK ME</button>
<div id="container">Container</div>

<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

If you are referring to the original width you need to save it to a variable first:

var container = document.getElementById("container")
var button = document.getElementById("button")

var containerOriginalWidth = container.clientWidth
var containerRatio = 1
button.addEventListener("click", function() {
  containerRatio = containerRatio - 0.05
  container.style.width = (containerOriginalWidth * containerRatio) 'px'
})

CodePudding user response：

How about just:

substracktBtn.addEventListener('click', function(){
    container.offsetWidth = container.offsetWidth * 0.95
});

Note: untested, not sure if JS requires the 'px' added at the end, but you get the gist.