JavaScript - Increase value depending on other value

Question

I have a variable (X) that can range from 0 to 100. I also have another variable (Y) that goes from -90 to 90. I want to make it so that if variable X is 0 then Y is equal to -90, variable X is 1 then variable Y is -88.2 (down by 1.8) all the way to X being 100 and Y being 90. How would I go about doing this?

Does this answer your question? ["Bindable" variables in JavaScript?](https://stackoverflow.com/questions/7543710/bindable-variables-in-javascript) — Lars Flieger, Mar 28 '22 at 10:14
So basically Y is simply a variable that cannot be set manually, but always depends on X? — connexo, Mar 28 '22 at 10:52
Well then that is exactly what you're getting from my answer, especially the "that should all be done in the background" part, which having to explicitly call a conversion function does not do. Why then you picked the other answer? How is it a better answer given your needs? — connexo, Mar 28 '22 at 11:03

score 2 · Accepted Answer · answered Mar 28 '22 at 11:07

It's just simple maths

y = -90 + 1.8 * x;

function getY(event){
  document.getElementById('y').value = (-90 + 1.8 * event.target.value).toFixed(2);
}

X : <input type="number" min="0" max="100" id="x" onchange="getY(event)" value='0'/>

Y: <input disabled id="y" value='-90'/>

Carsten Massmann · Answer 2 · 2022-03-28T10:54:46.763

1

You can change the value of the any of the range sliders. The value of the other slider will then be calculated and set accordingly:

const [one,two]=["one","two"].map(e=>document.getElementById(e)),
       cnvrt=(two.max-two.min)/(one.max-one.min);
       
document.body.addEventListener("input",ev=>{
 if (ev.target===one) two.value=+two.min+cnvrt*one.value;
 else                 one.value=(two.value-two.min)/cnvrt;
 [one,two].forEach(el=>el.nextElementSibling.textContent=el.value)
})

<input type="range" min="0" max="100" id="one" value="0"><span></span><br>
<input type="range" min="-90" max="90" id="two" value=-90><span></span>

The isolated conversion function would be:

function convert(x){
 const targetMin=-90, cnvrt=(90 -targetMin) /(100 - 0);
  return targetMin+cnvrt*x;
}

edited Mar 28 '22 at 10:54

answered Mar 28 '22 at 10:35

Carsten Massmann

26,510
2
22
43

This is similar to what I want, however, it would not require user interaction via slider. I would pass in variable X (e.g. 0) and then need to access Variable Y (e.g. -90). This should all be done in the background. – J. Doe Mar 28 '22 at 10:43
1

Well, then simply grab the formula and apply it in your "background" . – Carsten Massmann Mar 28 '22 at 10:48

connexo · Answer 3 · 2022-03-28T11:16:08.983

Use Object.defineProperties to declare your variables by assigning X, Y properties to the window object, if you want your variables to be global variables, and create Y as an accessor property (a.k.a. getter, basically a computed property):

Object.defineProperties(window, {
  _X: {
    value: undefined,
    writable: true,
    enumerable: true,
    configurable: true,
  },
  X: {
    set: function(val) {
      const currentVal = Number(val);
      if (isNaN(currentVal) || currentVal < 0 || currentVal > 100) {
        throw(`Failed to assign ${val} to X. It can only be assigned numeric values from 0 to 100`);
      } else {
        this._X = val;
      }
    },
    get: function() { return this._X },
    enumerable: true,
    configurable: true,
  },
  Y: {
    get: function() { return - 90 + this.X * 1.8 },
    enumerable: true,
    configurable: true,
  }
});

X = 100;
console.log(Y); // 90
X = 0;
console.log(Y); // -90
X = 50;
console.log(Y); // 0
try {
  X = 101; // Failed to assign 101 to X. It can only be assigned numeric values from 0 to 100
} catch (e) { console.error(e); }

Note: I also added a safeguard that won't allow to assign invalid values to X.

JavaScript - Increase value depending on other value

3 Answers3