<div class="container">
  <p class="text" data-text-a="ЭТО СТАРЫЙ ТЕКСТ" data-text-b="ВОТ НОВЫЙ ТЕКСТ"></p>
  <div class="btn">ВЫБРАТЬ</div>
</div>

.container {
  border: 5px solid blue;
  width: 30%;
}
.text {
  background: LemonChiffon;
  margin: 0;
  padding: 50px;
  text-align: center;
}
.btn {
  background: lightsteelblue;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}
.selected {
  border: 5px solid red;
}

const textEl = document.querySelector(".text");
const btnEl = document.querySelector(".btn");
const containerEl = document.querySelector(".container");

const state = {
  isPrimary: true
};

const render = () => {
  textEl.innerText = textEl.dataset[state.isPrimary ? "textA" : "textB"];
  containerEl.classList[state.isPrimary ? "add" : "remove"]("selected");
}

const swap = () => {
  state.isPrimary = !state.isPrimary;
  render();
}

btnEl.addEventListener("click", swap);

render();