每次在 Javascript 中单击同一个按钮时，如何用新文本替换文本？

Question

JS:

function changeText() {
    let str = document.getElementById("font").innerHTML; 
    document.getElementById("font").innerHTML = str.replace("Dog", "Cat");

    let str = document.getElementById("font").innerHTML; 
    document.getElementById("font").innerHTML = str.replace("Cat", "Mouse");

    let str = document.getElementById("font").innerHTML; 
    document.getElementById("font").innerHTML = str.replace("Mouse", "Rabbit");

    let str = document.getElementById("font").innerHTML; 
    document.getElementById("font").innerHTML = str.replace("Rabbit", "Horse");
}

HTML:

<button onclick="changeText()">Click</button>

The situation is that I have one button and when I press this button, I would like it to change the name of the new animal to the index.html file every time. How can I do this most easily? Thanks for the answers I am a beginner.

Answer 1

You could do something like this:

const animals = ['Dog', 'Cat', 'Mouse', 'Rabbit', 'Horse'];
let currentAnimal = 0;
function changeText() {
  currentAnimal = (currentAnimal + 1) % animals.length;
  document.getElementById("font").innerHTML = animals[currentAnimal];
}

Answer 2

var list = ["Dog","Cat","Mouse","Rabbit","Horse"]
var current = 0
function changeText() {
    let str = document.getElementById("font").innerHTML; 
    document.getElementById("font").innerHTML = list[(current+1)%list.length]
    current+=1

    
}

<button onclick="changeText()">Click</button>

Using the modulus % operator between the current index and array length, you can ensure cyclic behavior, once all the values in the list array are traversed.

Answer 3

You could do a replacement table

let replacements =  ['Dog', 'Cat', 'Mouse', 'Rabbit', 'Horse'];

function changeText() {
  let e = document.getElementById("font");
  for (let i = 0; i < replacements.length - 1; i++) {
    let c = e.innerHTML.replace(replacements[i], replacements[i+1]); 
    if (c !== e.innerHTML) {  //something has been replaced
      e.innerHTML = c;
      break; //stop replacing, because otherwise you will always end up with Horse
    }
  }
}

This will alsow work, if the element's content isn't just the animals name, but for instance a sentence containing the element ...

Also be aware that string.replace(old, new) will only replace the first occurence of old within the string ...

Answer 4

Hello and good on you for learning a new skill.

a good method to implement this is by using an array and counter

// Array of animals
let animals = [
    'Dog',
    'Cat',
    'Mouse',
    'Rabbit',
    'Horse'
]

// Counter to select an index in array
let counter = 0

// function to change text
function changeText() {
    // select the word from array
    const word = animals[counter]

    // select the html element you want to change
    // querySelector uses css3 selectors
    document.querySelector('.str').textContent = word

    // increment counter
    counter++;

    // check if counter is greater than or equal to array length - 1 because indexes start from 0
    // if true reset counter to 0
    if (counter >= animals.length - 1) {
        counter = 0;
    }
}