How to change onclick()

Question

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

Does this answer your question? [Changing element style attribute dynamically using JavaScript](https://stackoverflow.com/questions/5191478/changing-element-style-attribute-dynamically-using-javascript) — ikiK, Apr 15 '21 at 19:51
Try adding tags like "javascript" that way more people see it. — Peter Nielsen, Apr 15 '21 at 19:55

score 1 · Answer 1 · answered Apr 15 '21 at 19:55

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

Mister Jojo · Answer 2 · 2021-04-15T20:14:10.617

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>

Rashed Rahat · Answer 3 · 2021-04-15T20:26:19.437

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

How to change onclick()

3 Answers3

first and easiest

second and more clean way