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>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>
<!-- ... -->
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" />