Question

我一直在使用progress元素来显示电池值，只要点击一个按钮就会通过Javascript分配。除Safari外，该值在每个浏览器上都可靠地更新。

由于某种原因，这个progress元素只会在Web Inspector打开时更新它的值，直到那时它将错误地显示一个大约10％的条形图。

以下是用于分配值的开关案例：

    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;
    }

元素本身：

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

我想知道是否有这样的理由可能会发生这种情况，因为研究这个问题什么也没发现。

更新：我通过更改switch-case的语法发现并修复了问题;我不确定我怎么没注意到这一点。我现在的问题是它是如何起作用的，以及为什么打开检查员修复了这个问题。

Answer 1

您的switch语法不正确。您正在每个case语句中使用赋值声明，这会更改x变量并导致意外行为。你的switch语句看起来应该更像这样：

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

除非Web Inspector处于打开状态，否则Safari上的HTML5 Progress元素不会更改值

1 个答案: