change css class property increment

Question

I have a small question! I'am trying to change css width property using JavaScript like this:

document.getElementById("progressvalue").style.width = "80%";

.progress {
  width: 100%;
  max-width: 500px;
  border: 3px solid black;
  height: 20px;
  padding: 1px;
}

#progressvalue {
  height: 100%;
  width: 0%;
  background-color: #05e35e;
}

<div class="progress"> 
  <div id="progressvalue"></div>
</div>

But instead of 80% in JavaScript code, I want to increase the width value by 20%. Like (width = width + 20%) I want to apply this changing once (So I can use it mutiple times using other conditions), and this is why I need it like this (width = width + 20%)

I think you misunderstood the question; I meant to ask: what happens in the browser that leads to that line of JavaScript being executed? — David Thomas
– David Thomas, Commented Apr 12, 2022 at 12:14
Sorry for missunderstanding, my code is working. but instead of fixed value I want the value to be increased. — saliem antoun
– saliem antoun, Commented Apr 12, 2022 at 12:39

teresaPap · Accepted Answer · 2022-04-12 12:45:38Z

1

You can try to read the element's style.width property, by keeping only the numeric part of it and adding it to your step (eg 20%).

const step = 5;

const updateProgress = () => {
  const currentWidth = Number(document.getElementById("progressvalue").style.width.replace( "%", ""));
  
  if (currentWidth>=100) {
    return;
  }
  else {
    document.getElementById("progressvalue").style.width = `${currentWidth+step}%`;
  } 
}

You can check this out in this CodePen.

edited Apr 12, 2022 at 12:45

answered Apr 12, 2022 at 12:39

teresaPap

264 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

saliem antoun Over a year ago

Thank you so much. I just need one smal thing to edit. The code I want to reach is combined with a liquid code. insted av button I want the code to just run by it self. the idea is like this: If Liquid condition happend ==> apply this Javascript code So I don't want to apply the code using button.

teresaPap Over a year ago

I'm not sure what a liquid condition is, but can you try to call the updateProgress function when the condition is true? Like: Liquid condition happend ==> updateProgress()

Sami · Accepted Answer · 2022-04-12 12:14:31Z

1

I guess you want to do some animation right ? If so you can use recursivity with setTimeout:

function progress(val) {
    val += 20;

    document.getElementById("progressvalue").style.width = val + "%";
    if (val < 100) // To stop the loop when progress bar is full
        setTimeout(function () {
            progress(val);
        }, 1000)
}
progress(0); // Start the animation

answered Apr 12, 2022 at 12:14

Sami

7858 silver badges32 bronze badges

Comments

RandomSlav · Accepted Answer · 2022-04-12 12:16:00Z

1

This will increase by 20% every 0.5 seconds.

let percent = 0;

setInterval(() => 
{
    if(percent > 100) {
        clearInterval();
        return;
    }
    document.getElementById("progressvalue").style.width = percent + "%";
    percent += 20;
}, 500);

answered Apr 12, 2022 at 12:16

RandomSlav

6017 silver badges16 bronze badges

2 Comments

saliem antoun Over a year ago

It is keep increasing the value..Until it is 100% I want to change the value once

RandomSlav Over a year ago

If you want to increase infinitely remove the if statement.

Tanay · Accepted Answer · 2022-04-12 12:20:28Z

1

You can use this:

    var el = document.getElementById("progressvalue");

    var elementWidth = el.style.width;

    var newWidth = `${20+parseInt(elementWidth.substring(0, elementWidth.length-1))}%`
    el.style.width=newWidth;

Assuming that you have set the width of the element initially to a percent value.

answered Apr 12, 2022 at 12:20

Tanay

8991 gold badge8 silver badges13 bronze badges

Comments

ImAlbi · Accepted Answer · 2022-04-12 12:25:38Z

1

<button type="button" id="myBtn" onclick="myFunction()">Change the width</button>

<script>
function myFunction() {
  let progress = document.getElementById("progressvalue");
  let style = window.getComputedStyle(progress, null).getPropertyValue('width');
  let currentSize = parseFloat(style);
  progress.style.width = (currentSize + 20) + '%';
}
</script>

answered Apr 12, 2022 at 12:25

ImAlbi

111 bronze badge

Comments

Ballo Ibrahima · Accepted Answer · 2022-04-12 12:31:37Z

1

You can try it

//offsetWidth : returns the width of the element
var element_width=document.getElementById("progressvalue").offsetWidth

document.getElementById("progressvalue").style.width =element_width + (20*element_width/100) +'px' ;

edited Apr 12, 2022 at 12:31

answered Apr 12, 2022 at 12:10

Ballo Ibrahima

6418 silver badges14 bronze badges

2 Comments

saliem antoun Over a year ago

I tried it but nothing happened codepen.io/saliem-antoun/pen/ExopOEe It should return 70% width, did I miss anything?

Ballo Ibrahima Over a year ago

sorry i forgot to add px to the new width,I just modified you can see again

Ulysses Lanugon · Accepted Answer · 2022-04-12 12:47:09Z

0

You need to get the current width of <div id="progressvalue"></div>, put it in a variable and add 20 and reassign that value to <div id="progressvalue"></div>.

answered Apr 12, 2022 at 12:47

Ulysses Lanugon

563 bronze badges

Collectives™ on Stack Overflow

change css class property increment

7 Answers 7

2 Comments

Comments

2 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

2 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related