mardi 8 novembre 2022

Selecting multiple checkboxes in JS to find the correct expression to evaluate

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