Question 286015 in Javascript Question posted in
A very good W3school tutorial can be found here.

IF condition is Not Working in JavaScript

IF Condition is not working. From Three IF Conditions Only one is working and other ones are not working

Html Code :

<!DOCTYPE html> <html lang="en">   
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Toast Notification</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>  
<body>
  <div class="buttons">
    <button class="sucess" onclick="showtoast(successmsg)">Sucess</button>
    <button class="error"  onclick="showtoast(errormsg)">Error</button>
    <button class="invalid"  onclick="showtoast(invalidmsg)">Invalid</button>
    <button class="info"  onclick="showtoast(infomsg)">Info</button>
  </div>

  <div id="toastbox"></div>   
</body>   
<script src="script.js" defer></script> 
</html>

My JavaScript Code :

let toastbox = document.getElementById("toastbox");

let successmsg = '<i class="fa-solid fa-circle-check"></i> Success:This is a Success Toast'
let errormsg   = '<i class="fa-solid fa-circle-xmark"></i> Error:This is a Error Toast'
let invalidmsg = '<i class="fa-solid fa-circle-exclamation"></i> Invalid:This is a Invalid Toast'
let infomsg    = '<i class="fa-solid fa-circle-info"></i> Info:This is a Information Toast'

function showtoast(msg) {
  let toast = document.createElement("div");
  toast.classList.add("toast");
  toast.innerHTML = msg;
  toastbox.appendChild(toast);

  if (msg.includes("error")) {
    toast.classList.add("error");
  }

  if (msg.includes("invalid")) {
    toast.classList.add("invalid"); 
    console.log("Invalid hai bhai");
  }

  if (msg.includes("info")) {
    toast.classList.add("info");
    console.log("info lelo bhaiya");
  }

  setTimeout( () => {
    toast.remove();
  },5000);

}

Here on clicking info button Class info is added and ‘info lelo bhai’ is logged in console but other classes given in if condition Error and invalid not getting added and ‘invalid hai bhai’ is not getting logged in console which means IF conditions for both error and invalid are Not Working But Its Working For Info why .?

Tags:

2

Answers


  1. 0

    Based on the fact that you said "only one is working", I think the main issue is in fact what James wrote in their comment, namely that you check for lower-case letters but your messages contain upper-case letters.

    Probably the one "working" is the info one, because your infomsg does contain the text info (in fa-circle-info – notably not in Info:This is a because that’s with capital I).

    If your message contains Error with capital E but you check for .includes('error') with lower-case e, then it won’t match.

    To check for both upper-case and lower-case versions of your keywords, you can convert your message to lower-case before checking:

    if (msg.toLowerCase().includes('error')) {

    Or you can use a regular expression and specify the i modifier for case-insensitive matching:

    if (msg.match(/error/i)) {

    Or, of course, if you don’t even need to allow both upper-case and lower-case and in fact only need upper-case, you could change your check to simply check for the upper-case version alone:

    if (msg.includes('Error')) {
    Login or Signup to reply.
  2. 0

    From your code, it seems you’re trying to add different classes to the toast based on the message content. However, there might be issues with how you’re checking for specific words within the message.

    Let’s debug the issue step by step:

    1. Check the Message Content:
      Ensure that the messages you pass to the showtoast function contain the exact words "error," "invalid," or "info" that are expected by your if conditions. The comparison is case-sensitive, so ensure the case matches as well.

    2. Console Logging:
      Add console logs within each if condition to check if the code is reaching those blocks. This will help identify whether the message content isn’t triggering the conditions or if there’s an issue within those blocks.

    Here’s an updated version of your code with added console logs:

    function showtoast(msg){
  let toast = document.createElement("div");
  toast.classList.add("toast");
  toast.innerHTML = msg;
  toastbox.appendChild(toast);

  if (msg.includes("error")) {
    toast.classList.add("error");
    console.log("Error message detected");
  }

  if (msg.includes("invalid")){
    toast.classList.add("invalid"); 
    console.log("Invalid message detected");
  }

  if (msg.includes("info")){
    toast.classList.add("info");
    console.log("Info message detected");
  }

  setTimeout(() => {
    toast.remove();
  }, 5000);
}

    Run your code again, and upon triggering the different messages, check the console logs to see which condition is getting triggered. This should help identify if the issue lies within the message content or the if conditions themselves.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search