CODEWITHSUNDEEP
javascripthtml
Aaron T
Aaron T

Reputation: 47

How to change onclick()

I'm creating an alert page that has the user click a button to see if an alert is seen or not. In my code I have the button changing text but not color how do I get the button to change color when I click on it.

document.getElementById("seen").addEventListener(
  "click",
  function(event) {
    if (event.target.value === "unacknowledged") {
      event.target.value = "acknowledge";

    } else {
      event.target.value = "unacknowledged";
    }
  },
  false
);
#seen {
  background-color: #1da4f1;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 2px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}
<input type="button" id="seen" value="unacknowledged">

Upvotes: 0

Views: 139

Answers (3)

Rashed Rahat
Rashed Rahat

Reputation: 2475

To achieve what you want just simply add following two lines of code

document.getElementById("seen").style["background-color"] = "green" document.getElementById("seen").style["background-color"] = "#1da4f1"

if (event.target.value === "unacknowledged") {
      event.target.value = "acknowledge";
      document.getElementById("seen").style["background-color"] = "green";

    } else {
      event.target.value = "unacknowledged";
      document.getElementById("seen").style["background-color"] = "#1da4f1";
    }


document.getElementById("seen").addEventListener(
  "click",
  function(event) {
    if (event.target.value === "unacknowledged") {
      event.target.value = "acknowledge";
      document.getElementById("seen").style["background-color"] = "green"

    } else {
      event.target.value = "unacknowledged";
      document.getElementById("seen").style["background-color"] = "#1da4f1"
    }
  },
  false
);
#seen {
  background-color: #1da4f1;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 2px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}
<input type="button" id="seen" value="unacknowledged">

Upvotes: 0

Mister Jojo
Mister Jojo

Reputation: 22265

that ?

document.getElementById('seen').addEventListener('click', function(event) 
  {
  this.classList.toggle('hack')
  }, false )
#seen {
  background-color : #1da4f1;
  border           : none;
  border-radius    : 4px;
  color            : white;
  padding          : 2px 32px;
  text-align       : center;
  text-decoration  : none;
  display          : inline-block;
  font-size        : 14px;
  }
#seen.hack { 
  background-color : #e3f11d;
  color            : black;
  }
#seen::after { content: 'unacknowledged'}
#seen.hack::after { content: 'acknowledged'}
<button id="seen"></button>

Or (without pseudo class after)

document.getElementById('seen').addEventListener('click', function(event) 
  {
  this.textContent = this.classList.toggle('hack') 
                   ? 'acknowledged'
                   : 'unacknowledged'
  }, false );
#seen {
  background-color : #1da4f1;
  border           : none;
  border-radius    : 4px;
  color            : white;
  padding          : 2px 32px;
  text-align       : center;
  text-decoration  : none;
  display          : inline-block;
  font-size        : 14px;
  }
#seen.hack { 
  background-color : #e3f11d;
  color            : black;
  }
<button id="seen">unacknowledged</button>

Upvotes: 0

SpaceDogCS
SpaceDogCS

Reputation: 2968

You can do this in a lot of ways

first and easiest

You can insert an style on the element with event.target.style.backgroundColor = 'red';

learn more here

second and more clean way

Create a class and add the class to the element after clicking

css

.button-red {
  background-color: red;
}

js

event.target.classList.add('button-red');

learn more here

Upvotes: 1

Related Questions