开发者问题收集

如何更改数组中最后一个元素的颜色 - js

2021-09-23
476
javascript

我的以下代码有问题： 

let textPos = document.getElementById('js-headline');
let i = 0;

function typewriter() {
  let letters = ['C', 'o', 'd', 'e', 'X'];
  if (i < letters.length) {
    textPos.innerText += letters[i];
    i++;
    setTimeout(typewriter, 1000);
  } else if (i == letters.length) {
    let lastLetter = letters[letters.length - 1];
    lastLetter.style.color = 'red';
  }
}

typewriter();

在我的“else if”中，我选择了数组的最后一个元素，我想更改颜色，但是它不起作用 - 我收到一条错误消息

"Uncaught TypeError: Cannot set properties of undefined (setting 'color')".

有一件事很疯狂，我可以将这个数组的最后一个元素放在一个警告框或 console.log 中，它会向我显示最后一个元素...

3个回答

您尝试设置字符串的 .style.color 属性，但这是不可能的。您需要创建一个 <span> 元素才能更改颜色，并添加 <span> 而不是字母本身。

此外，您查找最后一个元素的条件是错误的，因此我也修复了这个问题。 

let textPos = document.getElementById("js-headline");
let i = 0;
function typewriter() {
        let letters = ["C", "o", "d", "e", "X"];
        if(i < letters.length - 1) {
        textPos.innerText += letters[i];
        i++;
        setTimeout(typewriter, 1000);
    }
    else {
        let lastLetter = letters[letters.length - 1];
        let span = document.createElement("span");
        span.innerText = lastLetter;
        span.style.color = "red";
        textPos.appendChild(span);
    }
}
typewriter();
<h1 id="js-headline"></h1>
Samathingamajig
2021-09-23

我希望这个替代打字机功能的演示能有所帮助！ 

async function typewrite(word, ele) {
  const letters = [...word];
  const lastLetter = letters.pop();
  for (letter of letters) {
    ele.textContent += letter;
    await new Promise(r => setTimeout(r, 500));
  }
  const aSpan = document.createElement("span");
  aSpan.style.color = "red";
  aSpan.textContent = lastLetter;
  ele.appendChild(aSpan);
}

typewrite("Hello World!", document.querySelector("#output"));
<div id="output"></div>
async await
2021-09-23

数组项的定位从 0 开始，因此当您说 i == letters.length 时，该属性不存在数组，数组上的最后一个索引等于 letters.length - 1

您需要将代码更改为以下内容： 

let textPos = document.getElementById('js-headline');
let i = 0;

function typewriter() {
  let letters = ['C', 'o', 'd', 'e', 'X'];
  if (i < letters.length - 1) {
    textPos.innerText += letters[i];
    i++;
    setTimeout(typewriter, 1000);
  } else if (i == letters.length - 1) {
    let lastLetter = letters[letters.length - 1];
    lastLetter.style.color = 'red';
  }
}

typewriter();

希望它有所帮助

编辑：

有关数组索引的更多信息

例如，在以下数组中，索引如下所示： 

var array = ['a', 'b', 'c', 'd', 'e']
              ^    ^    ^    ^    ^
              |    |    |    |    |
              0    1    2    3    4

当您调用 array.length 时，它将返回数组中元素的数量，但第一个索引从 0 开始

DevAddict
2021-09-23