使用Javascript创建不同的彩色警报消息

Question

I'm trying to create a simple alert message, now what inparticular I'm trying to make is that if a user fails to login the alert message background-color is red, if a user successfully logs in the alert background-color is green. I'm not sure how to make it so if the user succesfully logs in it uses the 'alertsuccess' div instead of the 'alert' div. I'm not sure how to go about this so any help is appreciated

<div id="alert" style="display:none;">
<span class="closebtn" onclick="this.parentElement.style.display='none';">&  times;</span> 
<p id="alertmsg"> </p>
</div>

<div id="alertsuccess" style="display:none;">
 <span class="closebtn" onclick="this.parentElement.style.display='none';">&     times;</span> 
<p id="alertmsg"> </p>
</div>

 <input type="text" id="username" placeholder="Username" name="uname" maxlength="15" required>

<button id="button123" onclick="showalert('alert');">Submit</button>

My Javascript

 function showalert(id){
 var divelement = document.getElementById(id);
 var username = document.getElementById("username").value;

   if (username === ""){
    document.getElementById("alertmsg").innerHTML = "You didn't insert a username!";
    divelement.style.display =='none'
    divelement.style.display = 'block';
    }

    else if(username === "u1460714"){
    document.getElementById("alertmsg").innerHTML = "Successfully logged   in";
    divelement.style.display =='none'
    divelement.style.display = 'block';
    }
    }

Finally my css

#alert {
height:100px;
width:300px;
background-color: #f44336;
color: white;
position: fixed;
}

.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}

.closebtn:hover {
color: black;
}

#alertmsg{
font-family:sans-serif;
font-size:15px;
text-align: center;
}

#alertsuccess {
background-color: #4CAF50;
}

Answer 1

Instead of using two div 's you can just set the color of the one. Then you won't run into issues where you have the same id twice.

 function showalert(alert) { var alertBlock = document.getElementById(alert); var inputName = document.getElementById('username'); var messageBlock = document.getElementById('alertmsg'); alertBlock.style.display = 'block'; if (inputName.value == '') { alertBlock.style.backgroundColor = 'red'; messageBlock.innerHTML = 'No username entered'; } else if (inputName.value == 'u2345') { alertBlock.style.backgroundColor = 'green'; messageBlock.innerHTML = 'You entered the specific username'; } } 

 #alert { width: 200px; height: 200px; display: none; } 

 <div id="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">X</span> <p id="alertmsg">test</p> </div> <input type="text" id="username" placeholder="Username"name="uname" maxlength="15" required> <button id="button123"onclick="showalert('alert');">Submit</button> 

Answer 2

I think you have a typo in there

divelement.style.display =='none';

should be = 'none' or it will do a compare. There are some other lines the same too. Hope this helps

Answer 3

What you could do is create a div (with your id) and change appearance based on the input by using css classes. Instead of creating a new div beneath the alert div, we can simply change the appearance with the classes alert and success. The div with id 'alert' never changes, except for the classes, which you define in your javascript.

Take a look at the css and especially at #alert, #alert.alert and #alert.success. A good thing to note is that the div with id 'alert' is hidden by default, this can be overruled in the javascript. Also try to avoid using id on element, because the element is less reusable, then when using classes.

 function showalert(id) { var divelement = document.getElementById('alert'); var username = document.getElementById("username").value; if (username === "") { document.getElementById("alertmsg").innerHTML = "You didn't insert a username!"; divelement.style.display = 'block'; divelement.className = 'alert' } else if (username == "u1460714") { document.getElementById("alertmsg").innerHTML = "Successfully logged in"; divelement.style.display = 'block' divelement.className = 'success' } } 

 #alert { height: 100px; width: 300px; color: white; position: fixed; display: none; } #alert.alert { background-color: #f44336; } #alert.success { background-color: #4CAF50; } .closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; } .closebtn:hover { color: black; } #alertmsg { font-family: sans-serif; font-size: 15px; text-align: center; } 

 <div id="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> <p id="alertmsg"> </p> </div> <input type="text" id="username" placeholder="Username" name="uname" maxlength="15" required> <button id="button123" onclick="showalert('alert');">Submit</button>