Increase div width by Amount on every click

Question

Hello All!

I've searched all over for a solution and haven't quite found what I'm searching for.

My problem

I'm trying to increase the width of my Div every time I click on my Button. All I have is my DIV element and my value I want to increase it by. I just need to know how to increase it.

Here's my Code: https://codepen.io/keanubarnardd/pen/XyXQZE?editors=1010

What I've tried and found

When doing my own research all I've found is:

• Using this method:document.getElementById('example').style.width="400px"; although this changes the width - this isn't what I'm trying to achieve as I want to increase it by a certain amount for each click.

Answer 1

Use

var widthElem= document.getElementById('rough-in-bar').offsetWidth;

to get the current width and add set new width

document.getElementById('rough-in-bar').style.width=widthElem + 100 + 'px'

to prevent overflow from grey section you can use:

   if(widthElem<document.getElementById('rough-in-progress').offsetWidth-10)
     document.getElementById('rough-in-bar').style.width=widthElem + 100 + 'px'

    //Data
    var roughInTotal = 0;

    //Text
    var roughInText= document.getElementById("rough-in-total");

    //UI Objects
    var roughInButton = document.getElementById("rough-btn");

    var roughInBar = document.getElementById("rough-in-bar");

    roughInButton.addEventListener("click",function(){
        addHour(1, roughInText);
    });
    //Set everything on our website
    roughInText.textContent =  roughInTotal + " hours";


     function addHour( addAmount, textToChange) {
        //Add the amount of hours worked...
        roughInTotal += addAmount;
        //Update our text to be displayed
        textToChange.textContent = roughInTotal + " hours worked";
        //Print how much hours we have for Debug

        var widthElem= document.getElementById('rough-in-bar').offsetWidth;
       if(widthElem<document.getElementById('rough-in-progress').offsetWidth-20)
       document.getElementById('rough-in-bar').style.width=widthElem + 100 + 'px'
    }

  <style>
    body{
        font-family: 'Roboto Condensed', sans-serif;
        margin: 0;
    }

    h1 {
        text-align: center;
        font-weight: 100;
        font-size: 270%;
        color:white;
        margin: auto;
        height: 50px;
        padding-top:10px;
    }

    div { 
        margin: 5% 5%;
        background-color: rgb(250, 233, 249);
        padding:20px;
        box-shadow: 0px 4px 4px  rgba(44, 62, 80 ,0.15);
    }

    h4{
        text-align: center;
    }

    h2{
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        padding: 0px;
        margin:auto;
    }
    .item p{
        width: 100%;
        height: 10%;
    }

    #rough-in-total{
        background-color: rgb(197, 197, 197, 0.6);
        padding: 5px;
        box-shadow: 0px 4px 4px  rgba(2, 2 , 2, 0.10);
    }

    p{
        text-align: center;
        font-size: 20px;
    }

    header p {
        margin-top: 0;
        color: white;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 0.8em;
        font-weight: 100;
        text-transform: uppercase;
    }
    button{
        text-decoration: none;
        font-size: 100%;
        padding: .5em 1em;
        color: rgba(0, 0, 0, 0.8);
        border: transparent;
        background-color: rgb(201, 199, 199);
        border-radius: 2px;
        margin-left: 45%;
        box-shadow: 0px 4px 4px  rgba(2, 2 , 2, 0.10);
    }

    button:hover{
        background-color: rgb(90, 90, 90);
        color: white;
    } 
    header{
        background-color: rgb(109, 109, 146);
        height: 100px;
    }

    #rough-in-progress{
        width:100%;
        margin: auto;
        margin-bottom: 20px;
        height: 30px;
        padding: 0;
        background-color: gray;

    }

    #rough-in-bar{
        width: 1%;
        height: 30px;
        background-color: rgb(255, 152, 241);
        margin: auto;
        padding: 0;
        box-shadow: none;
    }
    </style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300" rel="stylesheet">
    <title>Breakwell Electrical</title>
</head>
<body>
    <header>
            <h1> Welcome Keanu Barnard</h1>
            <p>This will include how many hours you have worked at each job</p>
    </header>

    <section>
        <div class ="item">
            <h2><span>Rough In's</span></h2>
            <p>This will be an account for how many hours you have spent working at rough ins with break well. Including marking out 
                   ,roughing in cable etc..
            </p>
            <!--Insert our Horizontal Graph Here that will increase when we add hours to it for now we just use number-->
            <p id ="rough-in-total"> 123 hours</p>
            <div id ="rough-in-progress">
                <div id="rough-in-bar">

                </div>
            </div>
            <button id = "rough-btn">Add hour</button>
        </div>
    </section>