Display a specific div depending on value generated after submit

December 10, 2021

I am setting up a questioner for some of my students and i am stuck.

I have several questions i need to ask my students. All the questions being yes/no questions being selected from a dropdown. "No" will always remain 0 but "Yes" will have a figure somewhere between 0-100 for each question. I am trying to add those selected values to sum them to a total so i can display a score/result.

I have attached the HTML and JS to sum the values from each of the dropdowns (All fine until here).

function submit() { let total=0; document.querySelectorAll('select').forEach(element => { total += parseInt(element.value); }); console.log(total); }


console.log = function(message) {
document.getElementById('result').innerHTML = message;};
console.log('');

 
 <p> 1. Did you attend summer training?

    <select id="select1">
        <option value="0">NO</option>
        <option value="9">YES</option>
    </select>
</p>

<p> 2. Have you passed all your grades?

    <select id="select2">
        <option value="0">NO</option>
        <option value="22">YES</option>
    </select>
</p>

<p> 3. Have you completed summer assignments?

    <select id="select3">
        <option value="0">NO</option>
        <option value="37">YES</option>
    </select>
</p>

<button onclick="submit()">Submit</button>
    
<div id="result"></div>

My final hurdle is depending on the end result ‘that is when i hit submit’ i want to show a specific div with some text on it right below the result/score for each score range (ie any result between 0-20,20-40,40-60,60-100). So for example if the result falls between 20-30. I want to show up a specific div below the result which will have some explainer text on it and the rest of the divs for each score range be hidden.

I am not well versed in JS and would appreciate some help or guidance. I have added my code for reference

>Solution :

Here you are :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>
      1. Did you attend summer training?

      <select id="select1">
        <option value="0">NO</option>
        <option value="9">YES</option>
      </select>
    </p>

    <p>
      2. Have you passed all your grades?

      <select id="select2">
        <option value="0">NO</option>
        <option value="22">YES</option>
      </select>
    </p>

    <p>
      3. Have you completed summer assignments?

      <select id="select3">
        <option value="0">NO</option>
        <option value="37">YES</option>
      </select>
    </p>

    <button onclick="submit()">Submit</button>

    <div id="result"></div>
    <div id="comment"></div>
  </body>
</html>

<script>
  function submit() {
    let total = 0;
    document.querySelectorAll("select").forEach((element) => {
      total += parseInt(element.value);
    });
    console.log(total);
    document.getElementById("result").innerHTML = total;

    if (0 < total && total < 20) {
      document.getElementById("comment").innerHTML = "so bad";
    } else if (20 < total && total < 40) {
      document.getElementById("comment").innerHTML = "bad";
    } else if (40 < total && total < 60) {
      document.getElementById("comment").innerHTML = "ok";
    } else if (60 < total && total < 100) {
      document.getElementById("comment").innerHTML = "Great!";
    } else null;
  }
</script>