除非打开Web检查器，否则Safari上的HTML5 Progress元素不会更改值

Question

I've been using a progress element to display a battery value which is assigned over Javascript whenever a button is clicked. This value updates reliably on every browser besides Safari.

For some reason this progress element will only update it's value while the Web Inspector is open, until that point it will wrongly display a bar about 10% full.

Below is the switch case used to assign the value:

    switch(x) { 
    case (x = "critical"):
        document.getElementById('batBar').value = "10";
        break;
    case (x = "low"):
        document.getElementById('batBar').value = "25";
        break;
    case (x = "half"):
        document.getElementById('batBar').value = "50";
        break;
    case (x = "high"):
        document.getElementById('batBar').value = "75";
        break;
    case (x = "full"):
        document.getElementById('batBar').value = "100";
        break;
    case (x = "charging"):
        document.getElementById('batBar').value = "100";
        break;
    case (x = "charged"):
        document.getElementById('batBar').value = "100";
        break;
    }

The element itself:

<div class="settingsline">
    <label>Battery 
        <progress id="batBar" max="100" value="60"></progress> 
    </label>
</div>

I was wondering if there was a reason that this might be happening as researching the issue is turning up nothing.

UPDATE: I spotted and fixed the problem by changing the syntax of the switch-case; I'm not sure how I didn't notice this. My question now is how it even worked in the first place and why opening the inspector fixed this.

Answer 1

Your switch syntax is incorrect. You are using assignment declarations in each case statement, which is changing the x variable and causing unexpected behavior. Your switch-statement should look more like this:

switch(x) { 
    case "critical":
       ...
       break;
    case "low":
       ...
       break;
}