Why does html range only update once width JavaScript?-CodePudding

Could you tell me why this simple code doesn't work? I would like to change the first slider the second one would change automatically.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Canva</title>
    </head>
    <body >
        <input  type="range"  name="n1" id="id1"  value="5" step="2"  min="1" max="100" oninput="change()" onchange="change()" />
        </br>
        <input  type="range"  name="n2" id="id2"  value="2" step="2"  min="1" max="100" />
        <input  type="number" name="n3" id="id3" />
        <script>
              function change(){
                window.document.getElementById('id2').value = 10;
                window.document.getElementById('id3').value = 10;
              }
        </script>
    </body>
</html>

CodePudding user response：

The change function is firing every time the input slider changes. You've just hardcoded the value that the output slider should be set to. You can check this by moving the output slider to some number other than 10, then moving the input slider again. The output slider will return to 10.

It looks like you want the value of the output slider to match the value of the input slider. Here's a sample showing that.

When the change function is called, the value of the output slider is set to the current value of the input slider.

const sourceSlider = document.getElementById('id1');
const targetSlider = document.getElementById('id2');
const targetInput = document.getElementById('id3');

function change() {
  const sourceValue = sourceSlider.value;
  targetSlider.value = sourceValue;
  targetInput.value = sourceValue;
}

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Canva</title>
    </head>
    <body >
        <input  type="range"  name="n1" id="id1"  value="5" step="2"  min="1" max="100" oninput="change()" onchange="change()" />
        </br>
        <input  type="range"  name="n2" id="id2"  value="2" step="2"  min="1" max="100" />
        <input  type="number" name="n3" id="id3" />
        <!--<script>
              function change(){
                window.document.getElementById('id2').value = 10;
                window.document.getElementById('id3').value = 10;
              }
        </script>-->
    </body>
</html>

CodePudding user response：

You are setting a fixed value 10 on change event, to have a dynamic value you can read the value from the event object that is passed to event listener callback from event.target.value:

id1.oninput = e => id2.value = e.target.value;
id3.oninput = e =>
id1.value = id2.value = e.target.value

<input type="range" name="n1" id="id1" value="5" step="2" min="1" max="100" />
</br>
<input type="range" name="n2" id="id2" value="2" step="2" min="1" max="100" />
<input type="number" name="n3" id="id3" />

CodePudding user response：

Your issue lies in the way you use the change() function. You are resetting it to a default of 10 every time you update it rather than the value of id1.

<!-- ... -->
<script>
    // you don't need to say window.document.something
    // just say document.something
    function change() {
         const targetVal = document.getElementById('id1').value;
         // sets the value of `id2` and `id3`    
         document.getElementById('id2').value = targetVal;
         document.getElementById('id3').value = targetVal;
    }
</script>
<!--  ... -->