Display a specific div depending on value generated after submit-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

If you want to pre-define the text in html you could do so like this:

HTML

<div id="0-20" >some text</div>
<div id="20-40" >some text</div>
<div id="40-60" >some text</div>
<div id="60-100" >some text</div>

CSS:

.hidden { display: none; }

then you just remove the class "hidden" from the desired target, with JS:

document.getElementById("40-60").classList.remove("hidden")

CodePudding user response：

You can use switch case for this. First add DIVs just below result div in html like below.

<div style="display:none" id="mess1"> Message 1 </div> 
<div style="display:none" id="mess2"> Message 2 </div> 
<div style="display:none" id="mess3"> Message 3 </div>
<div style="display:none" id="mess4"> Message 4 </div>

Then add switch case in javascript like below.

switch(true){
   case total <= 20 : document.getElementById('mess1').style.display = 'block';
   break;

   case total >= 20 && total <= 40 : document.getElementById('mess2').style.display = 'block';
   break;

   case total >= 40 && total <= 60 : document.getElementById('mess3').style.display = 'block';
   break;

   case total >= 60 && total =< 100 : document.getElementById('mess4').style.display = 'block';
   break;

}

So the complete code looks like below.

<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 style="display:none" id="mess1"> Message 1 </div> 
<div style="display:none" id="mess2"> Message 2 </div> 
<div style="display:none" id="mess3"> Message 3 </div>
<div style="display:none" id="mess4"> Message 4 </div>
<script>
function submit() { 
    let total=0; 
    document.querySelectorAll('select').forEach(element => { 
      total  = parseInt(element.value);
     });
    console.log(total); 
    switch(true){
       case total <= 20 : document.getElementById('mess1').style.display = 'block';
       break;
    
       case total >= 20 && total <= 40 : document.getElementById('mess2').style.display = 'block';
       break;
    
       case total >= 40 && total <= 60 : document.getElementById('mess3').style.display = 'block';
       break;
    
       case total >= 60 && total <= 100 : document.getElementById('mess4').style.display = 'block';
       break;
    
    }
}


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