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>

Answer 2

 <style> .bar{ border:1px solid #000; } </style> <script> function func(){ var currentWidth = document.getElementById('box').style.width; currentWidth = currentWidth.replace('px',''); document.getElementById('box').style.width = (parseInt(currentWidth) + 100).toString() + "px"; document.getElementById('box2').style.width = (parseInt(currentWidth) + 100).toString() + "px"; } </script> type 1 <div class='bar'> <div id="box" style="width:100px;height:50px;background-color:red;"> </div> </div> <br><br> Type 2 <div class='bar'> <div id="box2" style="width:100px;height:50px;background-color:red;position:relative;left:50%;transform:translateX(-50%)"> </div> </div> <br><br> <button onclick="func()">Check this...</button>

Increase div width by Amount on every click

Question

2 answers

solution1
2 ACCPTED 2018-11-08 08:48:41

solution2
0 2018-11-08 08:47:08

Increase div width by Amount on every click

Question

2 answers

solution1 2 ACCPTED 2018-11-08 08:48:41

solution2 0 2018-11-08 08:47:08

solution1
2 ACCPTED 2018-11-08 08:48:41

solution2
0 2018-11-08 08:47:08