Как сделать, чтобы когда y текста display:none, в button было написано 'Показать'

let r = document.querySelector('.r');
let b = document.getElementById('b');

document.addEventListener("DOMContentLoaded", function(event) { 
  b.innerText = "Скрыть"; // Устанавливаем первоначальный текст кнопке
});

function ye(){
  
  // Проверяем какой текст у кнопки в данный момент, и меняем на нужный

  if (b.innerText == "Скрыть") 
    b.innerText = "Показать"    
  else 
    b.innerText = "Скрыть";   
  
  r.classList.toggle('y');  
  
}

.r {
  display:inline-block;
}

.y {
  display:none;
}

<button id='b' onclick='ye()'></button>

<div class='r'>Текст</div>

summary { cursor: pointer }
details .msg { display: none }
details:not([open]) .msg-open, details[open] .msg-close { display: inline }

<details>
  <summary>
    <span class="msg msg-close">Скрыть</span>
    <span class="msg msg-open">Показать</span>
  </summary>
  Текст
</details>

const btn = document.querySelector('.btn');
const text = document.querySelector('.text');

function btnClick(e) {
  text.classList.toggle('active'); // Добавляем/удаляем класс .active при клике на кнопку
  if (text.classList.contains('active')) { // если у элемента есть класс .active
    btn.innerHTML = 'Скрыть'; // делаем одно действие
  } else { // иначе
    btn.innerHTML = 'Показать'; // другое действие
  }
}

btn.addEventListener('click', btnClick);

.btn {
  display: inline-block;
}

.text {
  display: none;
}

.text.active {
  display: inline-block;
}

<button class='btn'>Cкрыть</button>
<div class='text active'>Текст</div>