using the for loop to go through all the elements

Question

at each click, add an element red color, when all elements are red, then one click from the end will return black color to the elements, how can this be done? html:

<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <button id="btn">click</button>

Js:

 function ready() { var i = 0; document.getElementById("btn").onclick = function() { var list = document.getElementsByTagName("li"); for (i; i < list.length;) { list[i].style.color = "red"; i++; return; } }; }; document.addEventListener("DOMContentLoaded", ready);

Accepted Answer · 2017-01-29T20:08:54

Terms and style checks:

 var list = document.querySelector('ul'), item = list.querySelectorAll('li'); document.querySelector('button').onclick = function() { var itemRed = list.querySelectorAll('li[style*="color: red"]'); // Проверяем, все ли элементы крассные (количество красных li и всего сколько li) if(itemRed.length == item.length){ //Если да, то удаляем color у элемента for(var i = 0; i < item.length; i++){ item[i].style.color = ''; }; }else{ // Если нет, то красим следующий элемент в красный (itemRed.length использщуем, как индекс следующего) item[itemRed.length].style.color = 'red'; }; };

 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <button id="btn">click</button>

UPDATA :

 var list = document.querySelector('ul'), item = list.querySelectorAll('li'); list.status = false; // Присваиваем свойство document.querySelector('button').onclick = function() { var itemRed = list.querySelectorAll('li[style*="color: red"]'); // Проверяем, все ли элементы крассные (количество красных li и всего сколько li) или проверяем статус списка if(itemRed.length == item.length || list.status == true){ //Если да, то удаляем color у последнего элемента item[itemRed.length - 1].style.color = ''; // Проверяем, закончились ли красные if(itemRed.length == 1){ list.status = false; // Если да, то меняем статус }else{ list.status = true; // Если нет, то снова назначаем true }; }else{ // Если нет, то красим следующий элемент в красный (itemRed.length использщуем, как индекс следующего) item[itemRed.length].style.color = 'red'; }; };

 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <button id="btn">click</button>

and how to make one element change from red to black (from the end)?

using the for loop to go through all the elements

1 answer 1

More articles: