CODEWITHSUNDEEP
jqueryhtmlcss
The worm
The worm

Reputation: 5888

Adding class wont override current class

Trying to add a class that gives the effect of dismissing a notification..

so i have this 

   <div onclick="ifRead()" id="messageList">

      </div>

and then once i click a button to view the messages a class gets added

  <div onclick="ifRead()" id="messageList" class=" readClass">

      </div>

then if I click on the message the font-weight changes from bold to normal which is correct but the background-color does not change even though I have told it to be none... and also the content does not disappear:

.readClass {
  font-weight: normal;
  width: 100px;
  background-color: none !important;
  content: ""
}

.msgs:after {
  content: "1"
}

.msgs {
  background-color: yellow;
  width: 100px;
}

any idea why it isn't overriding?

all js code:

function myfunc() {
  var x = document.getElementById("myParagraph1");
  x.className += " myClass"
}

function sendMsg() {
  var msg = document.getElementById('msg').value;
  var msgObj = {
    sender: 'Bob',
    receiver: 'Paul',
    read: false,
    body: msg
  }
  messagesArray.push(msgObj)
}

function ifRead() {
  readMsg();
  if (messagesArray[0].read === true){
    var x = document.getElementById('messageList');
    x.className += " readClass"
  }
}

function readMsg() {
  messagesArray[0].read = true;
}

function viewMsgs(){
  var node = document.createElement("p");
  node.className = "msgs";
  var value = document.getElementById('msg').value;
  node.appendChild(document.createTextNode(value));
  document.getElementById('messageList').appendChild(node);
}

Upvotes: 0

Views: 153

Answers (3)

Akash Bhandwalkar
Akash Bhandwalkar

Reputation: 901

I think msg class is parent for the redclass. That is why background of redclass is none but background of msg will still be there. It will helpful if you share the code.

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65806

none is not a valid value for background-color. See the documentation here. Set it to transparent to explicitly remove it.

But, a better approach is to add a class that specifies a background color and then just remove that class when appropriate. By doing this, you don't have to specify the color to go to. Removing the class just reverts the element back to its original styling.

Also, elements support a classList property, which itself supports: add(), remove() and toggle() methods making it very easy to work with classes (easier than className).

Here's a simple example:

btn.addEventListener("click", function(){
  document.getElementById("btn").classList.toggle("backgroundOn");
});
.backgroundOn {
  background-color:red;
}
<div id="btn">Click Me to Toggle Classes</div>

Upvotes: 2

l0ul0u
l0ul0u

Reputation: 101

The background color Yellow is being applied to whatever container you've put .msgs class on.

From the code you've provided, there is no background color being applied to messageList div for you to remove.

Upvotes: 0

Related Questions