Javascript - if the width of an element is 100%, do something

Question

How do I force javascript to do the following? If the width of an element with the id myBar is 100%, change the style of an element with the ID result to be "block" (it's set to none)? Please answer!

Code: html

<div id="myProgress">
  <div id="myBar"></div>
</div>
<button onclick="move()">Run Malware Code Scan</button>
        <p id="result">
<em>Fount 142 threats!</em> Take responsibility please!
        </p>

Code: CSS

#myProgress {
    width: 100%;
    background-color: #ebf442;
}
#myBar {
    width: 1%;
    height: 30px;
    background-color: #ed4949;
}

#result {display:none;}
ul li {list-style-type:square;}

Code: JS

<script>
function move() {
    var elem = document.getElementById("myBar"); 
    var width = 1;
    var id = setInterval(frame, 3);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem.style.width = width + '%'; 
        }
    }
}
</script>
<script>
if (document.getElementById("myBar").style.width= "100%")
document.getElementById("result").style.display ="block"
</script>

P.S.: I'm a beginner at JS!

It depends on what you're trying to see if it's 100% of the width of. Are you trying to see if it covers the whole width of the page? Or the whole width of another element? — Adam Brocklehurst, May 14 '17 at 08:34
@JaromandaX Are you happy now? I added the code that I used. — , May 14 '17 at 08:51
@HentccL It's not about being happy but about rules, we are here to help, not to do your homework. Have some more respect to people that wants to help you. — Oen44, May 14 '17 at 08:56

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

3

Edit

You can change display to block in your frame function when you check if width is >= 100. Wouldn't that solve your problem?

<script>
function move() {
    var elem = document.getElementById("myBar"); 
    var width = 1;
    var id = setInterval(frame, 3);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
            document.getElementById("result").style.display = "block";
        } else {
            width++; 
            elem.style.width = width + '%'; 
        }
    }
}
</script>

edited Jun 20 '20 at 09:12

Community

1
1

answered May 14 '17 at 08:59

Oen44

3,156
1
22
31

1

Sorry, but that will not work. It was obviously an error to use the assignment operator instead of the `==` operator but the code might be performed before the 100% width is reached by the interval calls. It would be better to set display to "block" before the `clearInterval` in the if block. Then the with =100% condition ist fullfilled. If you agree, would you correct/extend your answer? – Peter Paul Kiefer May 14 '17 at 09:04
@PeterPaulKiefer Done. – Oen44 May 14 '17 at 09:14

score 0 · Answer 2 · answered May 14 '17 at 09:03

The problem of style properties

The element.style.property returns no value until the css is applied from the tag i.e <div style="..."></div>.

So your code is not working. You should apply the width css from the tag to make your code work.

<div id="myProgress">
  <div id="myBar" style="width: 100%;"></div>
</div>
<button onclick="move()">Run Malware Code Scan</button>
<p id="result">
  <em>Fount 142 threats!</em> Take responsibility please!
</p>

As Oen44 figured out, there is a syntax error too in your if condition (== is written as =).

Javascript - if the width of an element is 100%, do something

2 Answers2

Edit