Add an extra line to your alert code:
......
} else {
alert.className = `alert alert-${type}`;
alert.textContent = message;
document.getElementById("alertID").style.display = 'initial';
}
More info here
Solution 1 :
Problem :
I am using the Bootstrap alert system, but I encountered a problem. My Alert appears when the button is pressed, and then the setTimeout function works and my alert does not appear after 1 second. But the problem is here, the alert part does not appear again when I make a successful or incorrect login. I want my alert to appear on every successful or incorrect login. Thanks advance for your answers. (ı don’t want Jquery, only Vanilla JavaScript.) Codepen.io: https://codepen.io/BerkayAkgurgen/pen/xxEmQLo (All Code)
function showAlert(type, message) {
if (alert == null) {
alert = document.createElement("div");
alert.className = `alert alert-${type}`;
alert.id = "alertID";
alert.textContent = message;
firstCardBody.appendChild(alert);
alert.style.marginTop = "1rem";
} else {
alert.className = `alert alert-${type}`;
alert.textContent = message;
}
setTimeout(function myFunction2() {
document.getElementById("alertID").style.display = 'none';
}, 1000)
};
const form = document.querySelector("#todo-form");
const todoInput = document.querySelector("#todo");
const todoList = document.querySelector(".list-group");
const firstCardBody = document.querySelectorAll(".card-body")[0];
const secondCardBody = document.querySelectorAll(".card-body")[1];
const filter = document.querySelector("#filter")[0];
const clearButton = document.querySelector("#clear-todos")[0];
let alert = document.getElementById("alertID");
eventListeners();
//Event Listeners
function eventListeners() {
secondCardBody.addEventListener("click", deleteTodo);
form.addEventListener("submit", addTodo);
document.addEventListener("DOMContentLoaded", loadAllTodosToUI);
}
// Todo Ekleme
function addTodo(e) {
const newTodo = todoInput.value.trim();
if (newTodo === "") {
showAlert("danger", "Lütfen bir todo giriniz");
} else {
showAlert("success", "Giriş Başarılı");
addTodoToUI(newTodo);
addTodoToStorage(newTodo);
}
e.preventDefault();
}
function addTodoToUI(newTodo) {
const listItem = document.createElement("li");
const link = document.createElement("a");
link.href = "#";
link.className = "delete-item";
link.innerHTML = " <i class = 'fa fa-remove'></i>";
listItem.className = "list-group-item d-flex justify-content-between";
listItem.appendChild(document.createTextNode(newTodo));
listItem.appendChild(link);
todoList.appendChild(listItem);
todoInput.value = "";
}
// Alert
function showAlert(type, message) {
if (alert == null) {
alert = document.createElement("div");
alert.className = `alert alert-${type}`;
alert.id = "alertID";
alert.textContent = message;
firstCardBody.appendChild(alert);
alert.style.marginTop = "1rem";
} else {
alert.className = `alert alert-${type}`;
alert.textContent = message;
}
setTimeout(function myFunction2() {
document.getElementById("alertID").style.display = 'none';
}, 1000)
};
// Todo Storage Ekleme
function addTodoToStorage(newTodo) {
let todos = getTodosFromStorage();
todos.push(newTodo);
localStorage.setItem("todos", JSON.stringify(todos));
}
function getTodosFromStorage() { // Storage'den Todoları Almak
let todos;
if (localStorage.getItem("todos") === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem("todos"));
}
return todos;
}
// Sayfa Yüklendiğinde Storage Yükleme
function loadAllTodosToUI() {
let todos = getTodosFromStorage();
todos.forEach(function(todo) {
addTodoToUI(todo);
})
}
// Todo Silme
function deleteTodo(e) {
if (e.target.className === "fa fa-remove") {
e.target.parentElement.parentElement.remove();
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<link rel="stylesheet" href="berkay.css">
<title>Todo List</title>
</head>
<body>
<div class="container" id="bal" style="margin-top: 20px">
<div class="card row">
<div class="card-header">Todo List</div>
<div class="card-body bdy">
<form id="todo-form" name="form">
<div class="form-row">
<div class="form-group col-md-6">
<input class="form-control" type="text" name="todo" id="todo" placeholder="Bir Todo Girin" autocomplete="off" tabindex="1" />
</div>
</div>
<button type="submit" class="btn btn-danger">Todo Ekleyin</button>
</form>
<!-- <div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div> -->
</div>
<div class="card-body body">
<hr />
<h5 class="card-title" id="tasks-title">Todolar</h5>
<div class="form-row">
<div class="form-group col-md-6">
<input class="form-control" type="text" name="filter" id="filter" placeholder="Bir Todo Arayın" tabindex="2" />
</div>
</div>
<hr />
<ul class="list-group">
<!-- <li class="list-group-item d-flex justify-content-between">
Todo 1
<a href = "#" class ="delete-item">
<i class = "fa fa-remove"></i>
</a>
</li>-->
</ul>
<hr />
<a id="clear-todos" class="btn btn-dark" href="#">Tüm Taskları Temizleyin</a>
</div>
</div>
</div>
<div class="box" style="display: none;"></div>
<div class="box2" style="display: none;"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<script src="berkay.js"></script>
</body>
</html>Comments
Comment posted by OyeeBerkay
This code is working but it’s change the div style. I want it not to change my div style