JavaScript - при нажатии кнопки, проблема переключения текста

Question

У меня такая проблема: мне нужно создать кнопку, которая будет переключать мой текст. Я сделал это, но он меняется только один раз (от кошки к собаке), но как я могу переключаться, чтобы он менялся с кошки на собаку и собаки на кошку, пока не будет нажата кнопка остановки.

<p id="ryiaf"> CAT   
<form action="script.js">  
<input onclick="ryiaf.innerText = 'DOG'" type="button" value="CHANGE YOUR TEXT">
</form>

Answer 1

Вам необходимо реализовать логику для изменения вперед и назад. Может быть, что-то вроде этого:

<p id="ryiaf"> CAT   
<form action="script.js">  
<input onclick="ryiaf.innerText = (ryiaf.innerText == 'DOG' ? 'CAT' : 'DOG')" type="button" value="CHANGE YOUR TEXT">
</form>

Теперь, для лучшей читабельности кода, я бы предложил функцию onclick в вашем файле скрипта, например:

function handleClickChangeTxt() {
  if (ryiaf.innerText == 'DOG') ryiaf.innerText = 'CAT';
  else ryiaf.innerText = 'DOG';
}

<p id="ryiaf"> CAT   
<form action="script.js">  
<input onclick="handleClickChangeTxt()" type="button" value="CHANGE YOUR TEXT">
</form>

Answer 2

Вы можете легко переключать / менять текст одним нажатием кнопки следующим образом-

function toogleText() {
  var x = document.getElementById("ryiaf");
  if (x.innerHTML === "CAT") {
    x.innerHTML = "DOG";
  } else {
    x.innerHTML = "CAT";
  }
}

<p id="ryiaf"> CAT   
<form action="script.js">  
<input onclick="toogleText()" type="button" value="CHANGE YOUR TEXT"/>
</form>

DEMO: https://www.w3schools.com/howto/howto_js_toggle_text.asp