Slider (range) not updating text with value JavaScript HTML

Question

I'm having a small issue here getting my slider to update the value of itself being displayed on screen. For some reason I can't get to to function correctly. If someone with a little more experience here could help that would be fantastic. I've added the full page of my code, I have four sliders on the page but I'm only trying to achieve this with the first one for the time being.

<!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>

Does `.on input` occur in the post only? If not, the space between `on` and `input` should be removed. Notice also, that you don't have slider with id of `slider`. — Teemu, Mar 26 '18 at 17:12
Hi there, sorry about that I must have copied an older version, I've updated the posted with the correct code. — Matt, Mar 26 '18 at 17:28
refer here https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t — Rahul R., Mar 26 '18 at 18:18
I've tried changing the `onChange` to `onchange` but still no joy. I've added my full code to the post to help resolve this issue. — Matt, Mar 26 '18 at 19:27

score 0 · Answer 1 · answered Mar 26 '18 at 17:33

0

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

this code is making it so on input for the text field. I believe you wanted something like

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

try changing getElementById("P1H_value").oninput to getElementById("P1H").oninput

answered Mar 26 '18 at 17:33

Luple

481
3
21

Hi there, thanks for answering. I can see the mistake made with the `P1H_value` and `P1H` thanks for that I've added you're additional changes to the post but it still doesn't seem to be working? – Matt Mar 26 '18 at 17:55
Oh yeah, this code is weird. Is this raw javascript? what I would highly recommend is open up your browser console (right click and inspect. then click console). There are multiple errors being thrown if that is your only code. – Luple Mar 26 '18 at 18:10
Hmm I can't seem to work out why this still isn't working, I've added my full page code to the post to help troubleshoot this issue. – Matt Mar 26 '18 at 19:24
There are still syntax errors. For example: document.getElementById("P1H").slider.onchange(function(){updateSlider()}; should be document.getElementById("P1H").slider.onchange(function(){updateSlider()})); missing a parenthesis – Luple Mar 26 '18 at 19:51

score 0 · Accepted Answer · answered Mar 26 '18 at 19:40

You just needed to fix the javascript part: there was a parenthesis missing. I also coded the onChange in the HTML and I call updateSlider on the the page initialisation so the displayed value is always correct.

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>

Slider (range) not updating text with value JavaScript HTML

2 Answers2