Onclick() to Change Button Border Color Rather Changing Button Color

onclick button border color change

The best solution is to use css, try the following code:

 .addButton:active, 
 .addButton:focus 
 {
     border:0.5em solid #00c; /* here configure as your needs */
     color:#00c;
  }

Hope that helps!

when i clicked on button the border color change default in black color in html and css

It's an on-focus outline, automatically added by your browser. To remove it completely (not advisable), you can add this to your CSS:

button:focus {
  outline: none;
}

Changing the Color of the Dynamically loaded Buttons onclick

Try this :

  btn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
 /* you need to have already stored buttons in a data structure, something like : List<Button> btns; */
             for(Button b : btns){
                  if(b.getId() == v.getId(){ b.setBackgroundColor(getResources().getColor(R.color.gray)); } else{ b.setBackgroundColor(getResources().getColor(R.color.yourdefaultcolor)); }   //no need for isColor variable


}});
linearLayout.addView(btn, params);

Changing the color of button on click and confirmation

The problem of your code is that the color change is done when the button is focused on. That means that as soon as the focus gets lost, the color go back to the original.

What you could do is to add a class to the button when you click it. After that you can ask for confirmation.

const buttons = document.getElementsByClassName("button1");

for(button of buttons){
  button.addEventListener('click', (event) => {
    event.target.classList.toggle('grey');
    setTimeout(() => confirmOption(event.target), 100);
  });
}

function confirmOption(target){
  if(!confirm('are you sure?')){
      target.classList.toggle('grey');
  } else {
    //your code to send the data and redirect to another page
  }
}

.button1 {
    height:1.5cm;
    width: 4.5cm;
    padding: 15px 32px;
    font-size: 16px;
    margin: 4px 2px;
    background-color: #0065bd;
    color: white;
    border-radius: 8px;
    border-color: #E8E8E8;
    border: none;
}

.grey {
    background-color:#585858;
    border-color: #585858;
    outline: none;
}

<button class="button1">Brewery 1</button>  
<button class="button1">Distributor 1</button>  
<button class="button1">Retailer 1</button>
<button class="button1">WholeSaler 1</button>
<button class="button1">Brewery 2</button>
<button class="button1">Distributor 2</button>  
<button class="button1">Retailer 2</button>  
<button class="button1">WholeSaler 2</button>
<button class="button1">Brewery 3</button>  
<button class="button1">Distributor 3</button>  
<button class="button1">Retailer 3</button>  
<button class="button1">WholeSaler 3</button>

How to change color of a container border using radio buttons using JS?

As @Tyblitz remarked: your "border" needs to be set properly:

function changeTheme() {  if (document.getElementById("theme1").checked = true) {    document.container.style.backgroundColor = "lightgray";    document.container.style.borderColor = "red";  }}
function bgcolor(color, border) {  document.body.style.background = color;  document.body.style.border = border;
}

<div class="dropdown">  <input type="radio" id="theme1"    name="theme" value="1"    onclick="bgcolor('lightgray', '6px solid red');"   onchange="console.log('You changed the theme!')">Light<br><br></div>

change border color of multiple divs with button

You could add a separate function and attach a click event to the button1 then inside the function get all the divs using querySelectorAll and loop through them changing the border like :

var divs = document.querySelectorAll('div[class^=hud-menu]');
for (var i = 0; i < divs.length; i++) {
    divs[i].style.borderColor = "#" + randcol
}

var button1 = document.getElementById("button1");var button2 = document.getElementById("button2");
var allchar = "0123456789ABCDEF";
button1.addEventListener("click", changeBorderColor);button2.addEventListener("click", myFun);
function changeBorderColor() {  var randcol = "";  for (var i = 0; i < 6; i++) {    randcol += allchar[Math.floor(Math.random() * 16)];  }
  var divs = document.querySelectorAll('div[class^=hud-menu]');  for (var i = 0; i < divs.length; i++) {    divs[i].style.borderColor = "#" + randcol  }}
function myFun() {  var randcol = "";  for (var i = 0; i < 6; i++) {    randcol += allchar[Math.floor(Math.random() * 16)];  }  document.body.style.backgroundColor = "#" + randcol;}

.hud-menu-1,.hud-menu-2,.hud-menu-3,.hud-menu-4,.hud-menu-5 {  border: 4px solid red;}

<div class="hud-menu-1" style="text-align:center">  Text Here</div><br>
<div class="hud-menu-2" style="text-align:center">  Text Here</div><br>
<div class="hud-menu-3" style="text-align:center">  Text Here</div><br>
<div class="hud-menu-4" style="text-align:center">  Text Here</div><br>
<div class="hud-menu-5" style="text-align:center">  Text Here</div><br>
<button id="button1">click me to change border color</button><button id="button2">click me to change background color</button>

onClick trigger for change color of multiple buttons. JetpackCompose

Each button should maintain it's state.

val states = remember {
    SnapshotStateList<Boolean>().also {
        for(day in 0..days) {
            it.add(false)
        }
    }
}

Complete example

@Composable
fun ButtonSC(
    days: Int = 6
) {
    val states = remember {
        SnapshotStateList<Boolean>().also {
            for(day in 0..days) {
                it.add(false)
            }
        }
    }
    Box(
        Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Row(horizontalArrangement = Arrangement.SpaceEvenly){
            for(day in 0..days) {
                DaysOfWeekContainer(
                    color = if (states[day])Color.Blue else Color.Green,
                ){
                    DaysOfWeekButton(
                        onClick = {
                            states[day] = !states[day]
                        },
                        day = day
                    )
                }
            }
        }
    }
}