how to change color and name of button onclick-CodePudding

.enc-btn {
  background-color: #02bc15;
  border: none;
  border-radius: .5rem;
  font-size: 12px;
  color: white;
}

<label>Encounter Status:</label>
<button >Opened</button>

I want the button to be changed to #ff3030 when clicked.

So I want to change the color of the button to change to that color under the button css after it has been clicked. I need a more permanent solution than :focus And I also want the "opened" to change to "closed".

CodePudding user response：

This can be achieved using DOM.

JavaScript code example:

function btnclick(event) {
  event.target.textContent = !event.target.classList.contains('opened') ? 'Closed' : 'Opened'
  event.target.classList.toggle('opened')
}

// Adding individual listeners is inefficient, this would more correctly be done with event delegation
document.addEventListener('DOMContentLoaded', function() {
  for(let button of document.getElementsByClassName('enc-btn'))
    button.addEventListener('click', btnclick);
})

.enc-btn {
  background-color: #02bc15;
  border: none;
  border-radius: .5rem;
  font-size: 12px;
  color: white;
}

.opened {
  background-color: #ff3030
}

<label>Encounter Status:</label>
<button >Opened</button>
<button >Opened</button>

const button = document.querySelector('.btn');
button.addEventListener('click', btnclick); 
function btnclick() {
  button.style.backgroundColor = '#ff3030';
}

CodePudding user response：

Use the :focus psuedo-class.

.enc-btn {
  background-color: #02bc15;
  border: none;
  border-radius: .5rem;
  font-size: 12px;
  color: white;
}

button.enc-btn:focus {
  background-color: #ff3030;
  border: none;
  border-radius: .5rem;
  font-size: 12px;
  color: white;
}

<label>Encounter Status:</label>
<button >Opened</button>

Edit ~ solution with js.

const btn = document.getElementById('btn');

btn.innerHTML = 'Opened';

// Change button text on click
btn.addEventListener('click', function handleClick() {
  const initialText = 'Opened';

  btn.innerHTML = `Closed`;
});

// change color 
btn.addEventListener('click', function onClick() {
  btn.style.backgroundColor = '#ff3030';
  btn.style.color = 'white';
});

.enc-btn {
  background-color: #02bc15;
  border: none;
  border-radius: .5rem;
  font-size: 12px;
  color: white;
}

<label>Encounter Status:</label>
<button  id="btn"></button>

CodePudding user response：

A couple easy ways to do this would be to either use the jQuery addClass function or css function:

$(document).ready(function(){
  $(".enc-btn").click(function(){
     $(".enc-btn").css("color", "#ff3030");
     $(".enc-btn").addClass("new-color");
  });
});

.enc-btn {
  background-color: #02bc15;
  border: none;
  border-radius: .5rem;
  font-size: 12px;
  color: white;
}

.new-color {
  color: #ff3030;
}

I've gone ahead and thrown it in a fiddle you can see here: https://jsfiddle.net/BrianChenoweth/ch6v8og7/8/

CodePudding user response：

you can use this method in JavaScript

const btn = document.querySelector("#myBtn");

myBtn.addEventListener("click" , () => {
  
  btn.style.backgroundColor = '#ff3030';

})

.enc-btn {
  background-color: #02bc15;
  border: none;
  border-radius: .5rem;
  font-size: 12px;
  color: white;
}

<label>Encounter Status:</label>
<button id="myBtn" >Opened</button>