I have such a problem: I need to create a button that will toggle my text. I did it, but it changes only one time (From cat to dog), but how can I toggle, so that it will change from cat to dog and dog to cat until stop button is clicked.
<p id="ryiaf"> CAT
<form action="script.js">
<input onclick="ryiaf.innerText = 'DOG'" type="button" value="CHANGE YOUR TEXT">
</form>You need to implement the logic for changing back and forth. Maybe something like this:
<p id="ryiaf"> CAT
<form action="script.js">
<input onclick="ryiaf.innerText = (ryiaf.innerText == 'DOG' ? 'CAT' : 'DOG')" type="button" value="CHANGE YOUR TEXT">
</form>Now, for better code readability, I'd suggest an onclick function in your script file like this:
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>You can toggle/swap text easily with button click like this way-
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
