javascript - 根据数字使用 Javascript 更改文本颜色

Question

如果答案是“7”，我需要将文本颜色更改为红色；如果答案是“13”或“24”，我需要将文本颜色更改为绿色。我尝试了几种不同的方法，但似乎无法正常工作。我不知道是否有人知道我做错了什么，但我们将不胜感激。

do {
  var luckyNumber = prompt('What is your lucky number?', "");
  luckyNumber = parseInt(luckyNumber, 10);
} while (isNaN(luckyNumber));


if (luckyNumber == 7) {
  document.write("<p>Hey, 7 is my lucky number too!</p>").style.color = "red";
} else
if (luckyNumber == 13 || luckyNumber == 24) {
  document.write("<p>Wooh. " + luckyNumber + "? That's an unlucky number!</p>").style.color = "green";
} else {
  document.write("<p>The number " + luckyNumber + " is lucky for you!</p>");
}

Answer 1

问题是因为 document.write() 没有返回可以调用 style.color 的元素。这就是您在控制台中看到错误的原因。无论如何，您还应该避免使用 document.write，因为这是非常糟糕的做法。

相反，使用 document.createElement() 将新元素添加到 DOM。从那里您可以简单地向它们添加类，这些类通过 CSS 规则应用所需的颜色。像这样:

do {
  var luckyNumber = parseInt(prompt('What is your lucky number?', ""), 10);
} while (isNaN(luckyNumber));

var p = document.createElement('p');
document.body.appendChild(p);

if (luckyNumber == 7) {
  p.textContent = 'Hey, 7 is my lucky number too!';
  p.classList.add('red');
} else
if (luckyNumber == 13 || luckyNumber == 24) {
  p.textContent = `Wooh. ${luckyNumber}? That's an unlucky number!`;
  p.classList.add('green');
} else {
  p.textContent = `The number ${luckyNumber} is lucky for you!`;
}

.red { color: #C00; }
.green { color: #0C0; }