Как закрасить синим каждое четное значение из массива в элементе <ul>с помощью Javascript? - PullRequest
Новая
       3

Как закрасить синим каждое четное значение из массива в элементе <ul>с помощью Javascript?

0 голосов
/ 10 октября 2019

У меня есть в HTML, и мне нужно получить все значения массива и отобразить их в

в этом. Но каждое четное значение из массива должно быть синего цвета.

Пока что я извлек значения и создал структуру

в HTML, но я не уверен, как проверить четные значения из массива. Должен ли я сделать это с помощью оператора IF в FOR, или есть другой более простой способ через DOM. Я не могу использовать CSS. Это мой код: var animals = ['Dog', 'Donkey', 'Horse', 'Pig', 'Sheep', 'Chicken', 'Duck', 'Cat', 'Rabbit']; 
for (var i = 0; i < animals.length ; i++) {
    var animal = animals[i];
    var ul = document.getElementById('animals')
    var li = document.createElement('li');
    li.appendChild(document.createTextNode(animal));
    ul.appendChild(li);

// Я пытался с оператором IF, но он не работает. // 

 if (animal[i] % 2 === 0) {
      animal[i].style.color = '0000FF';
  }
}

Фреймворки также не разрешены

CSS также, как и для домашней работы для моего курса Javascript для начинающих :)

Я видел, какдостичь этого с помощью CSS и nth: child, но я не могу использовать это здесь. Прошу прощения, если вопрос кажется немного "глупым",

Ответы [ 3 ]

1 голос
/ 10 октября 2019

Я видел, что вы не хотите CSS или что-то в этом роде. А также это для домашней работы. Я думаю, что с этим вы можете пройти упражнение. Чистый JS. 

var animals = ['Dog', 'Donkey', 'Horse', 'Pig', 'Sheep', 'Chicken', 'Duck', 'Cat', 'Rabbit'];


function myFunction() {
  var x = document.createElement("UL");
  x.setAttribute("id", "myUL");
  document.body.appendChild(x);

  for (var index = 0; index < animals.length; index++) {
    var y = document.createElement("LI");
    if (index % 2 === 0) {
      y.style.color = '#0000ff'
    }
    var t = document.createTextNode(animals[index]);
    y.appendChild(t);
    document.getElementById("myUL").appendChild(y);
  }
}
<p>Click the button to create a UL and LI element.</p>

<button onclick="myFunction()">Try it</button>
0 голосов
/ 10 октября 2019

Если вы хотите сделать это в Javascript ниже код будет работать для вас Но загрузить javascript после HTML (означает в конце кода HTML) 

<html>
<head>
<title>My List</title>
</head>
<body>
<div id="animals"></div>
<script>
       var animals = ['Dog', 'Donkey', 'Horse', 'Pig', 'Sheep', 'Chicken', 'Duck', 'Cat', 'Rabbit'];
            var ul = document.createElement('UL');
            for (var i = 0; i < animals.length; i++) {
                var animal = animals[i];
                var li = document.createElement('LI')
                ul.appendChild(li);
                li.appendChild(document.createTextNode(animal));
                document.getElementById('animals').appendChild(li)

                if (i % 2 === 0) {
                    li.style.color = "blue"
                }
            }
</script>
</body>
</html>

Но это простое решение в CSS также 

li:nth-child(even){
color:blue;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
0 голосов
/ 10 октября 2019

Поскольку вы «не можете использовать CSS», вот две проблемы с вашим кодом ...

Во-первых, вы пытаетесь выполнить числовую операцию со строкой 

if (animal[i] % 2 === 0)

Ваш массив содержит строковые элементы, поэтому это (как говорит 04FS в своем комментарии ) фактически сказать 

if ("Dog" % 2 === 0)

Так что вместо этого просто проверьте index .. . 

if (i % 2 === 0)

Во-вторых, вы пытаетесь установить стиль CSS для строкового объекта в массиве, что, очевидно, не сработает, потому что у «собаки» нет * 1016. * property 

animal[i].style.color = '0000FF';

Вы должны установить его для li объекта, который вы только что создали ... 

li.style.color = '0000FF';

Таким образом, результат должен быть ... 

if (i % 2 === 0) {
  li.style.color = '0000FF';
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...