КАК выделить кнопку при нажатии другой кнопки

Question

У меня есть две кнопки на странице. Я создал вторую кнопку с CSS, чтобы она светилась серым цветом. Теперь я хочу добавить какое-нибудь событие (я полагаю, с помощью JS?), Которое выделяет вторую кнопку только после нажатия первой кнопки.

    <button class="tempo1" type="button" onclick="buttonShow()">Datenschutzerklärung</button> 

<!-- Und dann die Info-Box -->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">

TEXT
  <p style="text-align: center; margin-top: 20px">
    <button type="button" onclick="buttonHide()">Schließen</button>
  </p>
</div>

<!-- Der JavaScript-Code -->

<style>

.tempo1 {
  background-color: #A4A4A4;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 20px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}

.tempo1:focus {outline:0;}

@-webkit-keyframes glowing {
  0% { background-color: #848484; -webkit-box-shadow: 0 0 3px #848484; }
  50% { background-color: #A4A4A4; -webkit-box-shadow: 0 0 40px #A4A4A4; }
  100% { background-color: #848484; -webkit-box-shadow: 0 0 3px #848484; }
}

@-moz-keyframes glowing {
  0% { background-color: #848484; -moz-box-shadow: 0 0 3px #848484; }
  50% { background-color: #A4A4A4; -moz-box-shadow: 0 0 40px #A4A4A4; }
  100% { background-color: #848484; -moz-box-shadow: 0 0 3px #848484; }
}

@-o-keyframes glowing {
  0% { background-color: #848484; box-shadow: 0 0 3px #848484; }
  50% { background-color: #A4A4A4; box-shadow: 0 0 40px #A4A4A4; }
  100% { background-color: #848484; box-shadow: 0 0 3px #848484; }
}

@keyframes glowing {
  0% { background-color: #848484; box-shadow: 0 0 3px #848484; }
  50% { background-color: #A4A4A4; box-shadow: 0 0 40px #A4A4A4; }
  100% { background-color: #848484; box-shadow: 0 0 3px #848484; }
}
}

</style>

В основном я хочу поставить условие на кнопку (class = temp1) в верхней строке. Приведенный ниже код CSS должен быть просто активирован, если нажата другая кнопка (здесь я не указал код этой кнопки). Кроме того, я был бы признателен за любой совет, если есть способ стилизовать кнопку подобным образом с меньшим количеством кода. Если идея или мой вопрос недостаточно ясны, пожалуйста, спросите :)

Спасибо за ваше время и помощь!

Answer 1

вы можете достичь этого в js, прослушивая события нажатия на первую кнопку и добавляя класс 'glow' ко 2-й кнопке, например:

//select btn1, and listen to click events on it
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click", addGlow);

//the function addGlow, adds the glow class to btn2
function addGlow() {
  var btn2 = document.getElementById("btn2");
  btn2.classList.add("glow");
}

button{
  width:100px;
  height:50px;
  background-color:grey;
  border-radius:5px;
  border:none;
}

.glow{
  background-color: cyan;
  }

<button id="btn1">button 1</button>
<button id="btn2">button 2</button>

обратите внимание, что этот код добавляет только класс свечения css. Если вы хотите, чтобы кнопка «выключилась» в какой-то момент, вам нужно удалить класс свечения, что можно сделать так: btn2.classList.remove("glow");

надеюсь, это поможет:)