He estado tratando de hacer que la relación entre dos valores de entrada se bloquee si se marca una casilla de verificación.
He venido con el siguiente código que parece que funciona, pero tiene un comportamiento extraño. La mayoría de las veces funciona bien, pero a veces arroja algún resultado aleatorio o, más a menudo, no funcionaría con el primer evento de cambio y registraría los resultados.
const widthInput = document.getElementById('width'), heightInput = document.getElementById('height'), ratioLock = document.getElementById('ratioLock'); let lastWidthValue = +widthInput.value, lastHeightValue = +heightInput.value; widthInput.onchange = () => { if (ratioLock.checked) { if (lastWidthValue === 0) { lastWidthValue = +widthInput.value; lastHeightValue = +heightInput.value; } let ratio = +widthInput.value / lastWidthValue; heightInput.value = +(ratio * +heightInput.value); lastWidthValue = +widthInput.value; lastHeightValue = +heightInput.value; console.log(lastHeightValue, lastWidthValue) } }; heightInput.onchange = () => { if (ratioLock.checked) { if (lastHeightValue === 0) { lastHeightValue = +heightInput.value; lastWidthValue = +widthInput.value; } let ratio = +heightInput.value / lastHeightValue; widthInput.value = +(ratio * +widthInput.value); lastHeightValue = +heightInput.value; lastWidthValue = +widthInput.value; console.log(lastHeightValue, lastWidthValue) } }; ratioLock.onchange = () => { lastWidthValue = +widthInput.value; lastHeightValue = +heightInput.value; console.log(lastHeightValue, lastWidthValue) }; <body> <label for="width"> Size: </label><br /> <input id="width" inputmode="numeric" type="number" placeholder="Width"> x <input id="height" inputmode="numeric" type="number" placeholder="Height"> pixels. <br /> <input id="ratioLock" type="checkbox"> <label for="ratioLock"> Lock aspect ratio. </label><br /> </body>Algo que encontré interesante es que cuando aislé ese fragmento de código (me refiero a eliminarlo del resto del código que estoy escribiendo con todas las demás entradas, estilos y otras funciones) y lo probé solo, funcionó bastante bien y no funcionó. No encuentro ningún comportamiento extraño, así que no sé si tiene que ver con algo más que el código en sí. También creo que tal vez haya otra forma más corta y 'más elegante' de lograr esto.