jquery - jQuery：未捕获的 TypeError：无法在“HTMLProgressElement”上设置“value”属性：提供的双精度值是非有限的

Question

我知道有类似的问题，但似乎对我当前的问题没有任何作用。我有一个带进度条的简单音频播放器：

$(document).ready(function() {
  $(".audio-clip .volume").on("input", function() {
    var audio = $(this)
      .closest("div")
      .find("audio")[0];
    audio.volume = this.value;
  });

  $(".audio-clip .position").on("input", function() {
    var audio = $(this)
      .closest("div")
      .find("audio")[0];
    audio.currentTime = (audio.duration / 100) * this.value;
  });

  $("audio").on("timeupdate", function() {
    var pc = (audio.currentTime / audio.duration) * 100;
    $(this)
      .closest("div")
      .find(".position")
      .val(pc);
  });

并在 html

   <label>
    Position:
    <input type="range" class="position" min="0" max="100" step="1" value="0" />

    <progress class="nes-progress is-pattern position" value="0" max="100"></progress>
  </label>

一切都按预期工作，但在 JS 控制台中我看到

Uncaught TypeError: Failed to set the 'value' property on 'HTMLProgressElement': The provided double value is non-finite

标签： jquery

Answer 1

pc在尝试使用它来设置值之前，请确保它是一个有效的数字。

  $("audio").on("timeupdate", function() {
    var pc = (audio.currentTime / audio.duration) * 100;
    if (isNaN(pc)) {
      return;
    }
    $(this)
      .closest("div")
      .find(".position")
      .val(pc);
  });