I'm making a site and I'm making a message box. The borders in the message box aren't working properly (they aren't showing)
The code I had created for this is:
#LoginMessage {
box-sizing: border-box;
background-color: #7a2310
border: 1px solid #f00
border-radius: 20px;
padding: 0 14px;
}
<p id="LoginMessage"></p>
<script>
var UToP = {"User1": "Password","User2": "Password"}
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
const paragraph = document.getElementById("LoginMessage");
keys = [];
for(var key in UToP) {
keys.push(key)
}
if (!keys.includes(username)) {
paragraph.innerHTML = "User: " + username + " does not exist.";
paragraph.style = "color: orangered;";
} else {
if (UToP[username] == password) {
paragraph.innerHTML = "Logged into user: " + username + " sucessfully.";
paragraph.style = "color: green;";
} else {
paragraph.innerHTML = "Incorrect password for " + username + ".";
paragraph.style = "color: red;";
}
if (password == "") {
paragraph.innerHTML = "No password entered."
paragraph.style = "color: red;"
}
}
}
</script>
The console doesn't give any errors, so I don't know what's happening. I also included the border type, so I know that's not the problem. Also, the CSS is working, as when it changes the color property it does change color.
You forgot some semicolons in the CSS part - missing for background-color and border. Should be like:
#LoginMessage {
box-sizing: border-box;
background-color: #7a2310;
border: 1px solid #f00;
border-radius: 20px;
padding: 0 14px;
}