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>