Question

[此处输入图片说明][1][此处输入图片说明][2]

所以我需要使用 html 制作 5 个滑块，但我的代码有问题，它在第一个工作滑块（数字在变化）但在其他滑块中数字不会改变

<body>
    <div class="box">
        <div class="slider">
      <input type="range" name="eng1" min="0"  max="180" value="20">
        </div>
            <div class="value">180</div>
            </div>
        </div>
    </div>
    <script>
    const slider = document.querySelector("input");
    const value = document.querySelector(".value");
    value.textContent = slider.value;
    slider.oninput = function () {
        value.textContent = this.value;
    }
    </script>
</body>


<body>
        <div class="box2">
            <div class="slider2">
                 <input  type="range"  name="eng2" min="0"  max="180" value="30">
            </div>
                <div class="outcome">180</div>
                </div>
            </div>
        </div>
        <script>
            const slider2 = document.querySelector("input");
            const value = document.querySelector(".outcome");
            value.textContent = slider.value;

            slider.oninput = function () {
                value.textContent = this.value;

            }

                </script>

</body>

Answer 1

querySelector 选择它找到的第一个。
因此，两个 querySelector 都将从顶部遍历文档，找到第一个输入标签和具有“value”类的项目并使用它。这意味着两者都将选择并使用相同的滑块和 div。

添加：

<html>

<body>
  <div class="box">
    <div class="slider">
      <input type="range" name="eng1" min="0" max="180" value="20">
    </div>
    <div class="value">180</div>
  </div>

  <div class="box">
    <div class="slider">
      <input type="range" name="eng2" min="0" max="180" value="30">
    </div>
    <div class="value">180</div>
  </div>
</body>

<script>
  const slider = document.querySelectorAll("input");
  const value = document.querySelectorAll(".value");

  for (let i = 0; i < 2; i++) {
    value[i].textContent = slider[i].value;
    slider[i].oninput = function() {
      value[i].textContent = this.value;
    }
  }
</script>

</html>

您不应该放置多个脚本和正文标签。我将所有重命名为同一个类，并在脚本中使用循环。

我的代码有问题，它无法工作

1 个答案: