Question

我在这里遇到一个小问题，让我的滑块更新屏幕上显示的自身值。由于某种原因，我无法正常运作。如果在这里有更多经验的人可以帮助那将是非常棒的。我已经添加了我的代码的完整页面，我在页面上有四个滑块，但我只是尝试用第一个实现这个目标。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
      .slidecontainer {
        width: 100%;
      }

      .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 25px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
      }

      .slider:hover {
        opacity: 1;
      }

      .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        background: #4CAF50;
        cursor: pointer;
      }

      .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: #4CAF50;
        appearance: none;
        width: 25px;
        height: 25px;
        background: #4CAF50;
        cursor: pointer;
      }

      .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: #4CAF50;
        cursor: pointer;
      }
    </style>
  </head>

  <script>
    document.getElementById("P1H").slider.onchange(function(){updateSlider()}

    function updateSlider(){ document.getElementById('P1H_value').innerHTML = document.getElementById("P1H").value }
  </script>

<body>

  <h1>Player 1</h1>

  <div class="slidecontainer">

    <h2 align="center">Health:</h2>
    <h3 align="center" id="P1H_value">0</h3>

    <input type="range" min="1" max="100" value="100" class="slider" id="P1H" >

    <h2 align="center">Shield:</h2>
    <h3 align="center" id="P1S_value">0</h3>

    <input type="range" min="0" max="100" value="0" class="slider" id="P1S">

  </div>


  <h1>Player 2</h1>

  <div class="slidecontainer">

    <p align="center">Health:</p>
    <p align="center" id="P2H_value">0</p>

    <input type="range" min="1" max="100" value="100" class="slider" id="P2H">

    <p align="center">Shield:</p>
    <p align="center" id="P2S_value">0</p>

    <input type="range" min="0" max="100" value="0" class="slider" id="P2S">

  </div>

  <h1>Player 3</h1>

  <div class="slidecontainer">

    <p align="center">Health:</p>
    <p align="center" id="P3H_value">0</p>

    <input type="range" min="1" max="100" value="100" class="slider" id="P3H">

    <p align="center">Shield:</p>
    <p align="center" id="P3S_value">0</p>

    <input type="range" min="0" max="100" value="0" class="slider" id="P3S">

  </div>


  <h1>Player 4</h1>

  <div class="slidecontainer">

    <p align="center">Health:</p>
    <p align="center" id="P4H_value">0</p>

    <input type="range" min="1" max="100" value="100" class="slider" id="P4H">

    <p align="center">Shield:</p>
    <p align="center" id="P4H_value">0</p>

    <input type="range" min="0" max="100" value="0" class="slider" id="P4S">

  </div>

</body>
</html>

Answer 1

  document.getElementById("P1H_value").oninput = function(){
    updateSlider();
  }

此代码正在为文本字段输入。我相信你想要像

这样的东西

slider.onChange(function(){updateSlider()}

尝试将getElementById("P1H_value").oninput更改为getElementById("P1H").oninput

Answer 2

你只需修复javascript部分：缺少一个括号。我还在HTML中对onChange进行了编码，并在页面初始化时调用了updateSlider，因此显示的值始终是正确的。

updateSlider();

function updateSlider(){ 
   document.getElementById('P1H_value').innerHTML = document.getElementById("P1H").value; 
}

.slidecontainer {
        width: 100%;
      }

      .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 25px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
      }

      .slider:hover {
        opacity: 1;
      }

      .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        background: #4CAF50;
        cursor: pointer;
      }

      .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: #4CAF50;
        appearance: none;
        width: 25px;
        height: 25px;
        background: #4CAF50;
        cursor: pointer;
      }

      .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: #4CAF50;
        cursor: pointer;
      }

<h1>Player 1</h1>

  <div class="slidecontainer">

    <h2 align="center">Health:</h2>
    <h3 align="center" id="P1H_value">0</h3>

    <input type="range" min="1" max="100" value="100" class="slider" id="P1H" onChange="updateSlider();" >

    <h2 align="center">Shield:</h2>
    <h3 align="center" id="P1S_value">0</h3>

    <input type="range" min="0" max="100" value="0" class="slider" id="P1S">

  </div>


  <h1>Player 2</h1>

  <div class="slidecontainer">

    <p align="center">Health:</p>
    <p align="center" id="P2H_value">0</p>

    <input type="range" min="1" max="100" value="100" class="slider" id="P2H">

    <p align="center">Shield:</p>
    <p align="center" id="P2S_value">0</p>

    <input type="range" min="0" max="100" value="0" class="slider" id="P2S">

  </div>

  <h1>Player 3</h1>

  <div class="slidecontainer">

    <p align="center">Health:</p>
    <p align="center" id="P3H_value">0</p>

    <input type="range" min="1" max="100" value="100" class="slider" id="P3H">

    <p align="center">Shield:</p>
    <p align="center" id="P3S_value">0</p>

    <input type="range" min="0" max="100" value="0" class="slider" id="P3S">

  </div>


  <h1>Player 4</h1>

  <div class="slidecontainer">

    <p align="center">Health:</p>
    <p align="center" id="P4H_value">0</p>

    <input type="range" min="1" max="100" value="100" class="slider" id="P4H">

    <p align="center">Shield:</p>
    <p align="center" id="P4H_value">0</p>

    <input type="range" min="0" max="100" value="0" class="slider" id="P4S">

  </div>

滑块（范围）不使用值JavaScript HTML更新文本

2 个答案: