Developing a variety of colored notification messages using JavaScript

Question

Developing a variety of colored notification messages using JavaScript

I am working on creating a simple alert message with specific background colors depending on the user's login status. If a user fails to login, the alert message background-color should be red; if a user successfully logs in, the alert background-color should be green. I need help figuring out how to switch between using the 'alertsuccess' div and the 'alert' div based on the login outcome.

<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>

Javascript Function:

 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';
    }
    }

CSS Styling:

#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;
}

javascript html css

Answer 1

Answer №1

One way to dynamically change the appearance of a div based on user input is by utilizing CSS classes. Instead of creating additional div elements, you can modify the existing div's appearance by toggling between different classes such as 'alert' and 'success'. The main alert div with the id 'alert' remains constant, allowing for easy styling changes through JavaScript.

Review the CSS styles applied to #alert, #alert.alert, and #alert.success to understand how the appearance changes based on the assigned classes. Remember that the default state of the 'alert' div is hidden, which can be overridden in your JavaScript code. It is also advisable to use classes instead of ids for better reusability of elements.

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>

Answer 2

One way to dynamically change the appearance of a div based on user input is by utilizing CSS classes. Instead of creating additional div elements, you can modify the existing div's appearance by toggling between different classes such as 'alert' and 'success'. The main alert div with the id 'alert' remains constant, allowing for easy styling changes through JavaScript.

Review the CSS styles applied to #alert, #alert.alert, and #alert.success to understand how the appearance changes based on the assigned classes. Remember that the default state of the 'alert' div is hidden, which can be overridden in your JavaScript code. It is also advisable to use classes instead of ids for better reusability of elements.

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>

Answer 3

Answer №2

Opting for a single div with the desired color setting can prevent duplication of IDs and potential issues.

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 4

Opting for a single div with the desired color setting can prevent duplication of IDs and potential issues.

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 5

Answer №3

It appears there is a small error in your code snippet

divelement.style.display = 'none';

The correct syntax should have an equals sign instead of a double equal sign to assign the value. There may be other similar lines that need adjusting as well. I hope this clarification helps

Answer 6

It appears there is a small error in your code snippet

divelement.style.display = 'none';

The correct syntax should have an equals sign instead of a double equal sign to assign the value. There may be other similar lines that need adjusting as well. I hope this clarification helps

Developing a variety of colored notification messages using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to make a drop down menu list appear when I click on the parent li, and then show the sub li using JavaScript?

Guide to resolving the issue of DELETE error 404 not found in express.js

"Enhance user experience with jQuery's text expansion and collapse

AngularJS's $resource module returns an empty array as a response

Understanding how to retrieve the value count by comparing strings in JavaScript

Mastering Polymorphism and Dependency Injection in AngularJS: Tips and Tricks for Success

alter the color of the accordion display

Display HTML tags on an HTML page using TypeScript

Clicking on multiple instances of the same Vue.js component (popover) results in displaying identical data

Utilizing jQuery to Embed ID into <li> Element from JSON

Although PhoneGap resolution remains consistent, the outcomes may vary

What is the process for adding my JSON data to a select dropdown list?

How to disable annoying browser ad extensions using Javascript

Eliminating repeated keys from an array of objects

Tips for removing duplicate objects from an array

Breaking the Boundaries of Fuzzy Search with JavaScript

Transform an array into an object with assigned key names

React Component is not functioning with the timer running

Avoid running multiple YouTube views simultaneously within an AngularJS application

Angular 7: Easily Mark All Fields as Touched in Template-Driven Forms