you need to make a pop-up window when the user clicks the wrong place, there may be several errors, respectively, they should appear one above the other and fade out. In the code that I wrote the error is that if you click too fast some blocks do not apply fadeOut and they do not disappear

function error(head, messege) { number += 1; $(".error-container").append('<div class="error-messege error-messege-' + number + '"></div><h2>' + head + '</h2><p>' + messege + '</p></div>'); $('.error-messege-' + number + '').fadeIn("fast"); setTimeout(function() { $('.error-messege-' + number + '').fadeOut(5000); }, 10000); }; $("#click").click(function() { error("Edit error!", "choose another answer"); }); 
 .error-messege { width: 336px; text-align: center; background: #1c2942; color: #ce4d76; padding: 22px; border-radius: 4px; margin-bottom: 25px; position: relative; } .error-messege h2 { padding-bottom: 10px; font-size: 14px; text-transform: uppercase; letter-spacing: 1.5pt; } .error-messege p { font-size: 14px; letter-spacing: 1.5pt; } .error-container { position: fixed; bottom: 30px; right: 150px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="error-container"></div> <button id="click">click here</button>

    1 answer 1

    Your mistake is that you use the variable number , which is a global variable. If you click quickly, the number value increases, and when setTimeout triggered, the number value is different.

    There are two solutions:

    • Store the value of a number in a local variable to achieve closure .
    • If there is no need for a number , then create a variable in which the reference to your element with an error is saved.

    A live example on jsfiddle .

     //Решение с переменной function error(head, messege) { var $alert = $('<div class="error-messege error-messege"></div><h2>' + head + '</h2><p>' + messege + '</p></div>'); $(".error-container").append($alert); $alert.fadeIn("fast"); setTimeout(function() { $alert.fadeOut(1000); }, 1000); }; //Решение с closure function error2(head, messege) { number += 1; var currentNumber = number; $(".error-container").append('<div class="error-messege error-messege-' + currentNumber + '"></div><h2>' + head + '</h2><p>' + messege + '</p></div>'); $('.error-messege-' + currentNumber + '').fadeIn("fast"); setTimeout(function() { $('.error-messege-' + currentNumber + '').fadeOut(1000); }, 1000); }; number = 0; $("#click").click(function() { error("Edit error!", "choose another answer"); }); $("#click2").click(function() { error2("Edit error!", "choose another answer 2"); }); 
     .error-messege { width: 336px; text-align: center; background: #1c2942; color: #ce4d76; padding: 22px; border-radius: 4px; margin-bottom: 25px; position: relative; } .error-messege h2 { padding-bottom: 10px; font-size: 14px; text-transform: uppercase; letter-spacing: 1.5pt; } .error-messege p { font-size: 14px; letter-spacing: 1.5pt; } .error-container { position: fixed; bottom: 30px; right: 150px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div class="error-container"></div> <button id="click">click here</button> <button id="click2">click here 2</button> </div>