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?
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'/>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;
}
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.