¿Podría decirme por qué este código simple no funciona? Me gustaría cambiar el primer control deslizante, el segundo cambiaría automáticamente.
<!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>Su problema radica en la forma en que usa la función change() . Lo está restableciendo a un valor predeterminado de 10 cada vez que lo actualiza en lugar del valor de 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> <!-- ... -->Está configurando un valor fijo 10 en el evento de cambio, para tener un valor dinámico, puede leer el valor del objeto del event que se pasa a la devolución de llamada del detector de eventos desde 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" />