Java Script - Придайте определенным элементам массива разный цвет

Question

Я пытаюсь что-то сделать с JS, но, как обычно, массивы оказываются проклятием моего существования ...

Я должен просмотреть числа от 1 до 100 и распечатать их в HTMLкаждое число, которое делится на 3, должно отображаться красным цветом, а все остальные числа должны быть черными.Я пробовал так много вещей и пытался найти, как это сделать, но не мог понять это.Кто-нибудь, пожалуйста, скажите мне, как правильно это сделать?

Answer 1

Сначала выполните цикл по номерам от 1 до 100:

for (var i = 1; i <= 100; i++) {
    //Stuff will go here
}

Затем напишите число i в HTML:

document.write(i);

Наконец, добавьте оператор if:

if (i % 3) {
    document.write(i);
} else {
    document.write("THREE");
}

Полный код:

for (var i = 1; i <= 100; i++) {
  if (i % 3) {
    document.write(i + "<br>");
  } else {
    document.write("THREE<br>");
  }
}

EDIT

Вот как бы вы сделали THREE red:

for (var i = 1; i <= 100; i++) {
  if (i % 3) {
    document.write(i + "<br>");
  } else {
    document.write("<span style='color: red;'>THREE</span><br>");
  }
}

Answer 2

Поместите ТРИ в некоторый встроенный элемент и добавьте правило CSS, чтобы изменить цвет. Для печати списка решение объяснил Джек. (Сделал это по-другому, потому что я мог.)

const text = (new Array(100))
	.fill('')
	.map((_v, i) => (i % 3) === 0 ? `<b>THREE</b>` : i)
	.join('<br/>');

document.write(`<p>${text}</p>`)

b {
  color: red;
}

Answer 3

Вы можете использовать следующий код, чтобы получить то, что вы ищете.

for (let i = 1; i < 101; i++) {
    if(i % 3 == 0) {
       console.log('THREE');
    } else {
       console.log(i)
    }

}

Если вам нужно записать значения в документ, измените console.log на document.write