How to decrease skill bar width everytime button is clicked

Question

I have made a skill bar and I want it to decrease its width by 10% every time the button is clicked below is the html and css I used :-

<!DOCTYPE html>
<html>
    <head>
        <title>
            skill bar
        </title>
        <meta name="viewport" content=
        "width=device-width, initial-scale=1">
            <script src="./js/bar.js"></script>
        <link type="text/css" rel="stylesheet" href=
        "./css/bar.css">
    </head>
    <body>
        <h1 style="color:white;text-align:center;">
            My Skills
        </h1>
        <div class="box">
            <p>
                Skills
            </p>
            <div class="back">
            <div class="container skills set">
                <span id="percent">100%</span>
            </div>
            </div>
                <button  class="button" onclick="cli()">click me</button>
        </div>
    
    </body>
</html>

Above is the html and below is the css :-

   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');*
{
    box-sizing : border-box;
}

p
{
    color : #524c4c;
    text-align : center;
    font-size : 30px;
}

::selection
{
    background : royalblue;
    color : white;
}

body
{
    background : #fbf3f3;
    font-family : poppins;
}


.box
{
    border-radius : 10px;
    background-color : #f2f2f2;
    padding : 10px;
    box-shadow : rgba(0, 0, 0, 0.35) 0px 5px 15px;
    text-align: center;
}


.container
{
    width : 100%;
    background-color : #ddd;
    border-radius : 25px;
}


.skills
{
    text-align : right;
    padding-top : 6px;
    border-radius : 25px;
    padding-bottom : 10px;
    color : white;
}


.set
{
    width : 100%;
    background-color : #04AA6D;
    transition: all 1s ease-in-out;
}

.button
{
    background-color : #4CAF50;
    border : none;
    color : white;
    padding : 15px 32px;
    text-align : center;
    display : inline-block;
    font-size : 16px;
    margin : 40px 20px;
    cursor : pointer;
    
}
.back{
    background-color : #ddd9d9;
    border-radius : 25px;
    }

How do I do everytime the button click me is clicked to decrease the width of

by 10%. Hoping to get some responses. I tried it using the offsetwidth but I wasn't able to get any results I want it to decrease on percentage not on pixels. Here https://codepen.io/Gairo717/pen/qBpqqed you can view the live preview

function cli(){
    var on=document.getElementById("percent");
    var content = document.getElementsByClassName("set");
    on.innerHTML ="90%";
        content.style.width = '90%';
    
    }

Here is the js I am using but it's not giving any results

@ConnerWithAnE can you check what's the mistake on above js? — Gaito Uchiha, Mar 23 '22 at 06:45
Add a minimal working example using something like [codepen.io](http://codepen.io/) — Shivam Sharma, Mar 23 '22 at 06:46
If you could add it all to a js/css/html snippet that would make it easier to see — ConnerWithAnE, Mar 23 '22 at 06:47
@ConnerWithAnE here you go https://codepen.io/Gairo717/pen/qBpqqed — Gaito Uchiha, Mar 23 '22 at 06:54
Whoever closed this, that is in no way the same question, that is just a general question. — ConnerWithAnE, Mar 23 '22 at 07:03

score 1 · Accepted Answer · answered Mar 23 '22 at 06:59

So what I did here was change the "set" to be an id as when you try to grab "elementS" with the get elements it tries to get more than one item. I also put the percentage sign in its own span, this way the current value can be snagged. I then make it an integer, reduce it by 10 an then replace the visible number along with using a template literal string to change the percentage.

function cli(){
    var on=document.getElementById("percent");
    var content = document.getElementById("set");
    let val = parseInt(document.getElementById("percent").innerText) - 10; 
    on.innerHTML = val
        content.style.width = `${val}%`;
    
    }

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');*
{
    box-sizing : border-box;
}

p
{
    color : #524c4c;
    text-align : center;
    font-size : 30px;
}

::selection
{
    background : royalblue;
    color : white;
}

body
{
    background : #fbf3f3;
    font-family : poppins;
}


.box
{
    border-radius : 10px;
    background-color : #f2f2f2;
    padding : 10px;
    box-shadow : rgba(0, 0, 0, 0.35) 0px 5px 15px;
    text-align: center;
}


.container
{
    width : 100%;
    background-color : #ddd;
    border-radius : 25px;
}


.skills
{
    text-align : right;
    padding-top : 6px;
    border-radius : 25px;
    padding-bottom : 10px;
    color : white;
}


.set
{
    width : 100%;
    background-color : #04AA6D;
    transition: all 1s ease-in-out;
}

.button
{
    background-color : #4CAF50;
    border : none;
    color : white;
    padding : 15px 32px;
    text-align : center;
    display : inline-block;
    font-size : 16px;
    margin : 40px 20px;
    cursor : pointer;
    
}
.back{
    background-color : #ddd9d9;
    border-radius : 25px;
    }

<!DOCTYPE html>
<html>
    <head>
        <title>
            skill bar
        </title>
        <meta name="viewport" content=
        "width=device-width, initial-scale=1">
            <script src="./js/bar.js"></script>
        <link type="text/css" rel="stylesheet" href=
        "./css/bar.css">
    </head>
    <body>
        <h1 style="color:white;text-align:center;">
            My Skills
        </h1>
        <div class="box">
            <p>
                Skills
            </p>
            <div class="back">
            <div class="container skills set" id="set">
                <span id="percent">100</span><span>%</span>
            </div>
            </div>
                <button  class="button" onclick="cli()">click me</button>
        </div>
    
    </body>
</html>

If you wanted to ensure it did not go below zero just put in a check like this

function cli(){
    var on=document.getElementById("percent");
    var content = document.getElementById("set");
    let val = parseInt(document.getElementById("percent").innerText) - 10; 
    if (val >= 0) {
        on.innerHTML = val
        content.style.width = `${val}%`;
    }
}

Thanks but can you enlight me why didn't it work while I want to grab the set using get element class by id — Gaito Uchiha, Mar 23 '22 at 07:04
@GaitoUchiha `getElementsByClassName` returns an array-like object of all child elements. `getElementById` returns an Element object. — fen1x, Mar 23 '22 at 07:38

How to decrease skill bar width everytime button is clicked

1 Answers1