时间戳

首页 > 解决方案 > 如何更改数组中最后一个元素的颜色 - js

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

问题描述

我的以下代码有问题：

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”中，我选择了数组的最后一个元素，我想更改颜色，但它不起作用 - 我收到一条错误消息

“未捕获的类型错误：无法设置未定义的属性（设置'颜色'）”。

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

标签： javascript

解决方案

您正在尝试设置.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>

推荐阅读