I am making a basic kinematics calculator so I have 5 variables of which I just need three to solve the remaining 2. However, users can choose which they are solving. I am just beginning my JS journey again so I am not sure of either the correct syntax or logic to choose which equations I should be using.
Here is the user choices (as far as I can see these will select and work):
//Equation Variables
//Checkbox selection
const s = document.querySelector("#displacement");
const u = document.querySelector("#initial_velocity");
const v = document.querySelector("#final_velocity");
const a = document.querySelector("#acceleration");
const t = document.querySelector("#time");
//User input values
const sUser = document.getElementById("inputDistance").value;
const uUser = document.getElementById("inputVi").value;
const vUser = document.getElementById("inputVf").value;
const aUser = document.getElementById("inputAcceleration").value;
const tUser = document.getElementById("inputTime").value;
For the first equation I want to check if u, v, a and t are selected and then I will solve for s. In the second equation, I will see if v, a and t are chosen and then I will solve for s and u. And so on until all combinations are filled.
The HTML:
<div class="suvat-check">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="displacement" id="displacement">
<label class="form-check-label" for="displacement">
Displacement (s)
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="initial_velocity">
<label class="form-check-label" for="initial_velocity">
Initial Velocity (u)
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="final_velocity" id="final_velocity">
<label class="form-check-label" for="final_velocity">
Final Velocity (v)
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="acceleration" id="acceleration">
<label class="form-check-label" for="acceleration">
Acceleration (a)
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" value="time" id="time">
<label class="form-check-label" for="time">
Time (t)
</label>
</div>
</div>
And each input box is on a separate card.
One of the inputs will look like this (they're all similar):
<label for="inputDistance">Displacement (s)</label>
<input type="number" name="inputDistance" id="inputDistance" class="reset_form checkVelocity" value="" min="0.01" step="0.01" autocomplete="off">
<label for="unitsDistance">Units</label>
<select name="unitsDistance" id="unitsDistance" style="width:60px;">
<option value="m" selected>m</option>
<option value="km">km</option>
<option value="yd">yd</option>
<option value="mi">miles</option>
<option value="ft">feet</option>
</select>
The way I was thinking would be to use an if statement. But I am not completely sure how to do that properly yet with multiple checkboxes.
There is probably a good way to do this - which is why I am reaching out. Thanks.
Aucun commentaire:
Enregistrer un commentaire