Getting a result after mutliple variables in javascript

Question

I´m pretty new to coding and I´ve been trying to get a website running where there are multiple forms, I want to get different outputs depending on the interaction of the various answers. As of now I get a change in the console congruent with the selected element, it seems to be working, the variables being:

let a = document.getElementById('CAL');
    a.onchange = (ev) =>{
      console.log( a.value);} //Gets the CAL value of low,high,medium or naCal

    let b = document.getElementById('sev-lev-2');
    b.onchange = (ev) =>{
      console.log( b.value);} //Gets value of RBL as low, medium or high

    let c = document.getElementById('sev-lev-3');
    c.onchange = (ev) =>{
      console.log( c.value);} //Gets value of tooth loss as low, medium or high

    let d = document.getElementById('MPD');
    d.onchange = (ev) =>{
      console.log( d.value);} //Gets value of maximum pocket depth as low, medium or high
      
    let e = document.getElementById('type-bl');
    e.onchange = (ev) =>{
      console.log( e.value);} //Gets value of type of bone loss as low or high

    let f = document.getElementById('ST3a');
    {console.log(f.checked);}
    f.onchange = (ev) => 
    {console.log(f.checked);} //checks if Furcation is ticked in (true) or not

    let g = document.getElementById('ST3b');
    {console.log(g.checked);}
    g.onchange = (ev) => 
    {console.log(g.checked);} //checks if Moderate ridge defects is ticked in (true) or not

    let h = document.getElementById('ST4');
    {console.log(h.checked);}
    h.onchange = (ev) => 
    {console.log(h.checked);} //checks if Need complex rehab is ticked in (true) or not

I tried grouping some variables (ab) (ce) (fg), I am missing something to make these work, they always come out as undefined (when connecting a button to as an example console.log (ab), I tried multiple ways but are still stuck with this:

let ab //Gets value for CAL or RBL
    if (a === "low"|| b === "low") {ab= "low"}
    else if (a === "medium"|| b === "medium") {ab=== "medium"}
    else if (a === "hig"|| b === "high") {ab=== "high"}
    else {ab=="null"}

let fg;
if (f === "false"&& g === "false"){fg==="false"}
else {fg === "true"} ;

let ce;
if (c === "false"&& e === "false"){ce==="false"}
else {ce === "true"} 

The other part of the problem is that when I get results for ab/ce/fg I would like to get the end result from a function,so that I can couple the function to a button click. I structured the function with or without the grouped variables but still could not get to work, the version with grouped variables is:

 function debug(){
    if (ab == "low" && d == "low" && ce == "low" && fg=="false" && h == "false" ) {console.log;{"I"}}
    else if (ab == "low" && d == "medium" && ce == "low" && fg=="false" && h == "false" ) {console.log ("II")}
    else if (ab == "medium" && (d == "low"|| d =="medium") && ce == "low" && fg=="false" && h == "false") {console.log ("II")}
    else if (ab == "medium" && ((c== "medium" || "high") ||(d=="high")||(e=="high")||(fg=="true"))) {console.log ("III")}
    else if (ab == "high" &&  (c!= "high" || h!="true")) {console.log ("III")}
    else if (ab=="high" && d== "high" && e=="high" && fg=="true" && h == "true") {console.log ("IV")}
    else {console.log("")}    
    }

The HTML for the forms is the following:

<div id="staging"> 
    <div id="severity">
    <h2>Severity (Site of greater loss)</h2>
        <div><label for="CAL">Clinical attachment level:</label>
            <select name="CAL" id="CAL" onclick="Severity()">
                <option value="">--Interdental CAL--</option>
                <option value="low">1-2mm</option>
                <option value="medium">3-4mm</option>
                <option value="high">&#62;5mm</option>
                <option value="naCal" >Not available</option>
            </select>
        </div>
        <div id="RBL"   ><label for="rx-bone-loss">Radiographic bone loss (% of root):</label>
            <select name="RBL" id="sev-lev-2" onclick="Severity2()">
                <option value="">--Select RBL %--</option>
                <option value="low"> &#60;15%</option>
                <option value="medium">15-33%</option>
                <option value="high">&#62;33%</option>
            </select>
        </div>
        <div id="TL"><label for="tooth-loss">Perio caused tooth loss:</label>
            <select name="tooth-loss" id="sev-lev-3">
                <option value="">--Or planned for extraction--</option>
                <option value="low"> None</option>
                <option value="medium">&#8804;4</option>
                <option value="high">&#8805;5</option>
            </select>
        </div>
    </div>
    <div id="Complexity">
        <h2>Complexity</h2>
        <p><label for="max-probing-depth">Max Probing Depth:</label>
            <select name="MPD" id="MPD">
                <option value="">--Max PD--</option>
                <option value="low"> &#8804;4mm</option>
                <option value="medium">&#8804;5mm</option>
                <option value="high">&#8805;6mm</option>
            </select>
        </p>
        <p><label for="type-bl">Type of bone loss:</label>
            <select name="type-bl" id="type-bl">
                <option value="">--Type--</option>
                <option value="low"> Mostly horizontal</option>
                <option value="high">Vertical &#8805;3mm </option>
            </select>

        </p>
        <form>  <p><b>Additional Information:</b></p>  
            <input type="checkbox" id="ST3a" value="ST3a"><label for="Furcation"> Furcation involvement cl II-III</label><br>  
            <input type="checkbox" id="ST3b" value="ST3b"><label for="Defect"> Moderate ridge defects</label><br>  
            <input type="checkbox" id="ST4" value="ST4"><label for="Rehab"> Need for complex rehabilitation</label><br>   
        </form>
    </div>

Additional problem: First of all thanks for the answers, some of it I did understand, a great deal is too complicated for my level... Now I got the form working on single selections, but when trying to select another value without refreshing the value seems to go to "undefined" and with a second try give an error "Uncaught TypeError: Cannot read properties of undefined (reading 'value') at a.onchange"

this code shows the error on one variable selection:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Perio Staging and Grading</title>
</head>
<body>
        <h2>Severity (Site of greater loss)</h2>
            <div><label for="CAL">Clinical attachment level:</label>
                <select name="CAL" id="CAL" >
                    <option value="">--Interdental CAL--</option>
                    <option value="low">1-2mm</option>
                    <option value="medium">3-4mm</option>
                    <option value="high">&#62;5mm</option>
                    <option value="naCal" >Not available</option>
                </select>
            </div>
</div>
    </div>
    <button id="debug">Submit</button>
    <div id="result">

    </div>

    <script>
    
    let a = document.getElementById('CAL');
    a.onchange = (ev) =>{
      a= (a.value);} //Gets the CAL value of low,high,medium or naCal
    </script>
</body>