-1

Hi is there any way to check if an element like a progress bar has 100% width?

I've tried this but it does not work

let i = 0;
function start() {
    if (i == 0){
        i = 1;
        let elem = document.getElementById("myBar");
        let width = 10;
        let id =  setInterval(frame, 60);

        function frame() {
            if (elem.getAttribute("width") >= '100 %') {
                document.getElementsByTagName('form')[0].submit();
                clearInterval(id);
                i = 0;
            }
            else {
                width++;
                elem.style.width = width + '%';
            }
        }
    }
}

Edit: html Code:

<div id ="myProgress">
   <div id="myBar"></div>
</div>
Nexxizz
  • 25
  • 5
  • 100% width relative to what? – unhackit Dec 17 '22 at 12:00
  • relative to the whole screen (browser window). Is it possible? – Nexxizz Dec 17 '22 at 12:02
  • Okay, can you add the html ? – unhackit Dec 17 '22 at 12:02
  • 1
    It is bad practice to create logic that is based on the state of HTML elements. State should be created using variables in JavaScript, then you can add logic to alter these variables, and then set the properties of the HTML elements to appear according to that state. – Peter B Dec 17 '22 at 12:10
  • As Peter already suggested, rethink your approach. Your logic should not be dependent on a style property value. Ask yourself,: 1: do I get that progress value already from somewhere? If not, can that plugin, method or API expose that value? 2: Once I get that 0..100 value how do I perform an action at 100? – Roko C. Buljan Dec 17 '22 at 12:50
  • Could you explain what is that you're actually building and trying to achieve? What's the context of your problem? If not explained this is more like an [**XY-Problem**](https://en.wikipedia.org/wiki/XY_problem) – Roko C. Buljan Dec 17 '22 at 12:54
  • I want to make a quiz game and i want to build in a progress bar, when the progress bar is full i want to submit a form so that the there is no answer. – Nexxizz Dec 17 '22 at 13:22

2 Answers2

0

If you need raw property from style use element.style.width it will return string value (if setted through style attribute). If you need result value use window.getComputedStyle(element).width this will returns value in px

relates to: How to get an HTML element's style values in JavaScript?

maksimr
  • 4,891
  • 2
  • 23
  • 22
  • Just don't use this suggestion for the afore-mentioned reasons. **Never** make logic dependent on style values. It should be the other way around. – Roko C. Buljan Dec 17 '22 at 12:52
  • @Roko C. Buljan it depends, sure that we can find N different ways but every solution has pros and cons. Sometimes it's better to do straight forward without overthinking. I have suggested how to get style property from JavaScript, it may be usefully for other who will see this question (because question about how to get width). But I agree that we always should be aware about impact. – maksimr Dec 17 '22 at 14:24
0

Empty divs won't take space by default, you either need to add content inside it, or use CSS

Additionally if (elem.getAttribute("width") >= '100 %') should be if (width >= 100)

function start() {
  let elem = document.getElementById("myBar");
  let width = 10;
  let id = setInterval(frame, 60);

  function frame() {
    if (width >= 100) {
      // document.getElementsByTagName('form')[0].submit();
      clearInterval(id);
      width = 10;
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}

start()
#myProgress {
  background-color: #ccc;
  width: 100%;
}

#myBar {
  background-color: #00ff00;
  width: 0%
}

#myBar:after {
  content: '\200b';
}
<div id="myProgress">
  <div id="myBar"></div>
</div>
Lawrence Cherone
  • 46,049
  • 7
  • 62
  • 106