Rewriting word effect in Javascript-CodePudding

I am switching text in a loop for visual effect. This is what it looks like https://naejc.github.io/Script/GodsLies

This is the code

const symbols = ['God', 'Words'];
let count = 0;
const element = document.getElementById("WORD1");
const iteration = () => {
element.innerHTML = symbols[parseInt(count / 2, 10) % symbols.length];
if (count % 2 !== 0) {
element.classList.add("LANGUAGE");
} else {
element.classList.remove("LANGUAGE");
}
count  ;
if (count === symbols.length * 2) {
count = 0;
}
};
let inthandle = setInterval(iteration, 270);
iteration();

Can someone please tell me how I can use this script across more than one instance? It has no effect if used again, attempting to create another element which switches text.

CodePudding user response：

how do you try to create a "new" element? be aware, that each id can only be used once per page. it needs to be unique. otherwise the js code will use the first id it finds.

https://www.w3schools.com/html/html_id.asp

you may need to rewrite your code to use class or something like this:


var initWords = function (element) {
  const symbols = ['God', 'Words'];
  let count = 0;
  const iteration = () => {
    element.innerHTML = symbols[parseInt(count / 2, 10) % symbols.length];
    if (count % 2 !== 0) {
      element.classList.add("LANGUAGE");
    } else {
      element.classList.remove("LANGUAGE");
    }
    count  ;
    if (count === symbols.length * 2) {
      count = 0;
    }
  };
  let inthandle = setInterval(iteration, 270);
  iteration();
}

initWords(document.getElementById("WORD1"));
initWords(document.getElementById("WORD2"));