提问人：Abel 提问时间：6/24/2023 更新时间：6/25/2023 访问量：47
我有不允许 HTML 属性（特别是文本）在循环中更改的 Javascript 代码
I have Javascript code that doesn't allow HTML property (text specifically) to change in the loop
问：
我脑海中有一个代码，如果一个网站第一次打开，某个文本会循环显示列表中的单词。当我尝试运行代码时，控制台描述“text[num]”有错误，因此无法运行代码。这是以下代码：
var num = 0;
var texts = [
"1 Element",
"2 Element",
"3 Element",
"4 Element",
"5 Element"
];
window.onload = function() {
changingTitleLoop();
}
function changingTitleLoop(){
setTimeout(function() {
changeText();
// Call the loop function again to create an endless loop
num++;
changingTitleLoop();
}, 3000);
}
function changeText(){
if(num >= texts.length){
num = 0;
} else {
var something = document.getElementById("changingText");
something.textContent = texts[num];
}
}
我尝试将标签“textContent”更改为“innerHTML”，但是它没有解决问题。代码中是否遗漏了某些内容？有什么错误吗？
答：
0赞
Abel
6/25/2023
#1
更新：当我意识到我需要指定基本元素的特定“数组”或“位置”时，我正在查看代码，因为我使用的是 getElementByIDName（）。在这种情况下，我决定使用 getElementsByClassName（） 来查看是否存在很多差异。
事实证明，我需要使用 document.getElementsByClassName（“changingText”）[0] 或将 document.getElementsByClassName（“changingText”） 替换为 document.querySelector（“.changingText”）。因此，属性被找到并运行，因为 JavaScript 能够更改其 textContent。
代码的工作原理如下：
var num = 0;
var texts = [
"1 Element",
"2 Element",
"3 Element",
"4 Element",
"5 Element"
];
window.onload = function() {
changingTitleLoop();
}
function changingTitleLoop(){
setTimeout(function() {
changeText();
// Call the loop function again to create an endless loop
num++;
changingTitleLoop();}, 2000);
}
function changeText(){
if(num >= texts.length){
num = 0;
} else {
var element = document.querySelector(".changingText");
element.textContent = texts[num];
}
}
在检查元素的属性以确定是否存在可能影响或可能不会影响 JavaScript 的 CSS 属性后，即使标记了其他类和 Id，以下 HTML 似乎仍然有效。
<h1 class="class1 changingText" id="id1">???</h1>
评论