在Javascript中重写单词效果

Question

我在一个循环中切换文本以获得视觉效果

代码

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();

有人能告诉我如何在多个实例中使用这个脚本吗?如果再次使用，尝试创建另一个元素来切换文本，则不起作用。

Answer 1

如何创建"new"元素?请注意，每个id在每页只能使用一次。它必须是唯一的。否则js代码将使用它找到的第一个id。

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

你可能需要重写你的代码来使用class或类似的东西:

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"));