Greater than and lesser than in if statements in Javascript

Question

I need help. Using the greater and lesser than validation message does not work. I have 3 times 3 conditions for certain drugs, which I want to validate. Three times 'more, three times 'lido' and three times 'kane'.

Whenever I run the whole code the validation messages are not being replaced. So the first validation message for 'More' remains, but only the 'too high and too low messages, followed by the Lido and then the Kane error messages. I tried to replace these with the 'Test' message when using greater than and lesser than, but to no avail. Can someone help? I am trying to replace the false validation message with the true one, or at least continue with the next false validation message, but I don't want to display them all.

   if (more > 0.4) {
    error.innerHTML = "More is too high<br>Press 'Clear All' and start again"
     moreDose.value = "" 
     return false;
    
   } 
    if (more < 0.2) {
      error.innerHTML = "More is too low<br>Press 'Clear All' and start again"
      moreDose.value = ""  
      return false;     
  }

  if (more > 0.2 && more < 0.4) {
    error.innerHTML = "Test"
    return true;
  }

  if (lido > 3) {
    error2.innerHTML = "Lido is too high<br>Press 'Clear All' and start again"
    lidoDose.value = ""  
    return false;     
    }

    if (lido < 0.6) {
      error2.innerHTML = "Lido is too low<br>Press 'Clear All' and start again"
      lidoDose.value = ""
      return false;
            }
    if (lido < 0.6 && lido > 3) {
    error2.innerHTML = "Test 2"
    return true;
    }


    if (kane > 1.2) {
    error3.innerHTML = "Kane is too high<br>Press 'Clear All' and start again"
    ketaDose.value = ""  
    return false; 
    }
    if (kane < 0.12) {
      error3.innerHTML = "Kane is too low<br>Press 'Clear All' and start again"
      ketaDose.value = ""
      return false;
  }
  if (kane < 0.12 && kane> 1.2) {
    error3.innerHTML = "Test 3"
    return true;
   }

Answer 1

You shouldn't return in each if block, because when any of the early tests succeeds, it will never perform the laster tests.

Insetear, use if/else if/else to check mutually exclusive conditions. This will also solve the problem that you were omitting the cases where an input is exactly equal to one of the range boundaries.

var moreDose = document.getElementById("more");
var lidoDose = document.getElementById("lido");
var ketaDose = document.getElementById("kane");

var error = document.getElementById("error");
var error2 = document.getElementById("error2");
var error3 = document.getElementById("error3");

function validate(more, lido, kane) {
  if (more > 0.4) {
    error.innerHTML = "More is too high<br>Press 'Clear All' and start again"
    moreDose.value = ""
  } else if (more < 0.2) {
    error.innerHTML = "More is too low<br>Press 'Clear All' and start again"
    moreDose.value = ""
  } else {
    error.innerHTML = "Test"
  }

  if (lido > 3) {
    error2.innerHTML = "Lido is too high<br>Press 'Clear All' and start again"
    lidoDose.value = ""
  } else if (lido < 0.6) {
    error2.innerHTML = "Lido is too low<br>Press 'Clear All' and start again"
    lidoDose.value = ""
  } else {
    error2.innerHTML = "Test 2"
  }


  if (kane > 1.2) {
    error3.innerHTML = "Kane is too high<br>Press 'Clear All' and start again"
    ketaDose.value = ""
  } else if (kane < 0.12) {
    error3.innerHTML = "Kane is too low<br>Press 'Clear All' and start again"
    ketaDose.value = ""
  } else {
    error3.innerHTML = "Test 3"
  }
}

document.getElementById("validate").addEventListener("click", function() {
  validate(parseFloat(moreDose.value),
    parseFloat(lidoDose.value),
    parseFloat(ketaDose.value));
});

More: <input id="more" type="number"><br> Lido: <input id="lido" type="number"><br> Kane: <input id="kane" type="number"><br>
<input id="validate" value="Validate">

<div id="error"></div>
<div id="error2"></div>
<div id="error3"></div>