CODEWITHSUNDEEP
javascripthtmlcss
saliem antoun
saliem antoun

Reputation: 51

change css class property increment

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%)

Upvotes: 0

Views: 398

Answers (7)

Ulysses Lanugon
Ulysses Lanugon

Reputation: 56

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>.

Upvotes: 0

teresaPap
teresaPap

Reputation: 26

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.

Upvotes: 1

Ballo Ibrahima
Ballo Ibrahima

Reputation: 627

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' ;

Upvotes: 1

ImAlbi
ImAlbi

Reputation: 11

<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>

Upvotes: 1

Tanay
Tanay

Reputation: 889

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.

Upvotes: 1

RandomSlav
RandomSlav

Reputation: 592

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);

Upvotes: 1

Sami
Sami

Reputation: 755

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

Upvotes: 1

Related Questions