0

I´ve been trying to make the ratio between two input values to be locked if a checkbox is checked.

I´ve come with the code below which looks like it works, yet it has some strange behavior. Most of the time it works fine yet sometimes it throws some random result or more often wouldn't work with the first onchange event yet logging the results.

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>

Something I found interesting is that when I isolated that piece of code (I mean removing it from the rest of code I'm writing with all the other inputs, styles and other functions) and tested it by itself it worked pretty fine and didn't find any strange behavior so I don't know if it has to do with something else than the code itself. Also I think maybe there is another, shorter 'more elegant' way of achieving this.

chCharly
  • 1
  • 3
  • If you use `input` instead of `change` you'll see the updated value in realtime rather than having to wait for the input to lose focus. But the 'strange results' are probably just floating point math at work, see: [Is floating point math broken?](https://stackoverflow.com/questions/588004/is-floating-point-math-broken) – pilchard Feb 01 '22 at 21:53
  • @pilchard Thank you, I think I´m okay with the precision/imprecision of the floating point math, with 'random result' I mean really random, like changing from `100 100` to `101 2593.93569203` for example. – chCharly Feb 01 '22 at 22:17

0 Answers0