при клике на кнопку выделяется блок желтым цветом

[mixnet]

ребят я новичек в js поэтому прошу помощи, или в какую сторону копать, вопрос такой, нужно чтоб при клике на кнопку блок выделялся желтым цветом (не знаю может там таймер нужно прикриплять)
надо чтоб при выборе да в select блок "выберите цвет<br>для ссылки" помечался желтым цветом на 30 секунд

<div class="row">
<label for="name">выделить ссылку<br>цветом?<span class="req">*</span></label>
<select  class="styled-select" id="counts" onChange="show_country();">
<option value="0" selected disable>Нет</option>
<option value="1">Да</option>
</select>
</div>
 
 
<span id="q1" style="display: none">
<div class="row">
<label for="email">выберите цвет<br>для ссылки<span class="req">*</span></label>
<select class="styled-select" name="colors" onchange="this.style.backgroundColor=this.value"> 
  <option style="background-color:#cccccc" value="#cccccc">Серый</option>  
  <option style="background-color:#ffff00" value="#ffff00">Желтый</option>  
  <option style="background-color:#ff0000" value="#ff0000">Красный</option>  
  <option style="background-color:#8099E8" value="#8099E8">Голубой</option>  
</select></div>
</span>

[Vlasenko Fedor]

<div class="row">
  <label for="name">выделить ссылку
    <br>
    <span id="select_color">цветом?</span>
    <span class="req">*</span>
  </label>
  <select class="styled-select" id="counts" onchange="show_country(this.value);">
    <option value="0" selected disable>Нет</option>
    <option value="1">Да</option>
  </select>
</div>
<span id="q1" style="display: none">
  <div class="row">
    <label for="email">выберите цвет
      <br>для ссылки
      <span class="req">*</span>
    </label>
  </div>
</span>
<script>
  function show_country(val) {
    var el = document.getElementById('select_color'),
      timerId;
    if (val == 1) {
      el.style.backgroundColor = 'yellow';
      timerId = setTimeout(function () {
        el.style.backgroundColor = 'transparent';
      }, 30000)
    } else {
      el.style.backgroundColor = 'transparent';
      clearTimeout(timerId);
    }
  }
</script>
примерно так

[mixnet]

Poznakomlus, спасибо))) а не подскажите как можно сделать чтоб желтый цвет плавно исчезал?

[Vlasenko Fedor]

<style>
  .yellow {
    background-color:yellow;
  }
  .none {
    background-color:transparent;
    -webkit-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    transition-duration: 1.5s;
  }
</style>
<div class="row">
  <label for="name">выделить ссылку
    <br>
    <span id="select_color">цветом?</span>
    <span class="req">*</span>
  </label>
  <select class="styled-select" id="counts" onchange="show_country(this.value);">
    <option value="0" selected disable>Нет</option>
    <option value="1">Да</option>
  </select>
</div>
<span id="q1" style="display: none">
  <div class="row">
    <label for="email">выберите цвет
      <br>для ссылки
      <span class="req">*</span>
    </label>
  </div>
</span>
<script>
  function show_country(val) {
    var el = document.getElementById('select_color'),
      timerId;
    if (val == 1) {
      el.className = 'yellow';
      timerId = setTimeout(function () {
        el.className = 'none';
      }, 30000)
    } else {
      el.className = 'none';
      clearTimeout(timerId);
    }
  }
</script>

используйте CSS свойство transition

[mixnet]

Poznakomlus, ооо огромное спасибо то что надо)