Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Изменить цвет фона списка циклом!! (https://javascript.ru/forum/events/79199-izmenit-cvet-fona-spiska-ciklom.html)

Andriy_co2020k29z8d23 03.01.2020 21:35
Изменить цвет фона списка циклом!!
 
На странице находится список ul с семью цветами, написанными на английском языке. Нужно чтобы в цикле alert поочередно выводил внутреннее содержимое каждого пункта li, и сразу после этого этот текущий пункт зарисовался тем цветом, который в нем записан.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>red</li>
        <li>green</li>
        <li>yellow</li>
        <li>coral</li>
        <li>gray</li>
        <li>violet</li>
    </ul>
    <script src="./script.js"></script>
</body>
</html>


let liArr = document.getElementsByTagName('li');
//console.log(liArr[2].innerText);
for(let i = 0; i<= liArr.length; i++){
    liArr[i].style.backgroundColor = liArr[i].innerText;
     alert(liArr[i].innerText);
}

Aetae 03.01.2020 21:41
В хроме трюк не получится, у него баг(ФИЧА!!!111) с отрисовкой при alert.

Andriy_co2020k29z8d23 03.01.2020 21:45
Цитата:
Сообщение от Aetae (Сообщение 518380)
В хроме трюк не получится, у него баг(ФИЧА!!!111) с отрисовкой при alert.
Цитата:
В хроме трюк не получится, у него баг(ФИЧА!!!111) с отрисовкой при alert.
можно как-то это обойти??

рони 03.01.2020 22:11
Andriy_co2020k29z8d23,
Цитата:
Сообщение от Andriy_co2020k29z8d23
i<= liArr.length
не бывает элементов списка(массива) с индексом равным length этого списка(массива)

Aetae 03.01.2020 22:14
Цитата:
Сообщение от Andriy_co2020k29z8d23 (Сообщение 518381)
можно как-то это обойти??
Может быть, как-то через зад, но желания ковыряться (в заду, ага) нет совершенно. В реальной жизни такое никогда не потребуется. В принципе alert никогда не потребуется. А коли это задачка - код абсолютно правильный(учитывая поправку рони), просто показывайте результат в другом браузере; если спросят почему - так и говорите - баг. Вы пока учитесь программировать, а не костылями жонглировать.

Malleys 03.01.2020 22:57
Цитата:
Сообщение от Aetae
В хроме трюк не получится, у него баг(ФИЧА!!!111) с отрисовкой при alert.
Так вы определитесь с насекомыми! А в Chrome всё ОК!

Цитата:
Сообщение от Andriy_co2020k29z8d23
можно как-то это обойти??
А зачем обходить, используйте асинхронную функцию!

Цитата:
Сообщение от рони
не бывает элементов списка(массива) с индексом равным length этого списка(массива)
Используйте цикл for-of и таких проблем не будет!

Цитата:
Сообщение от Aetae
так и говорите - баг.
Какой «баг»? Зачем эта борьба?

Andriy_co2020k29z8d23, alert является «блокирующей скрипты» функцией, т. е. если вы хотите увидеть применение стилей, вам следует «немного» подождать!

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
</head>
<body>
	<ul>
		<li>red</li>
		<li>green</li>
		<li>yellow</li>
		<li>coral</li>
		<li>gray</li>
		<li>violet</li>
	</ul>
	<script>
		async function pseudoAsyncAlert(text) {
			await new Promise(resolve => {
				setTimeout(() => {
					alert(text);
					resolve();
				}, 50);
			});
		}
		async function main() {
			for (const item of document.getElementsByTagName("li")) {
				item.style.backgroundColor = item.textContent;
				await pseudoAsyncAlert(item.textContent);
			}
		}
		document.addEventListener("DOMContentLoaded", main);
	</script>
</body>
</html>


Цитата:
Сообщение от Aetae
В реальной жизни такое никогда не потребуется.
А laimas аж вспотел, пока доказывал полезность блокирующих модальных окон в IE...

рони 03.01.2020 23:12
dialog color async
 
Andriy_co2020k29z8d23,
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.min.js"></script>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Stoke&display=swap');
dialog {
    padding: .5em;
    border-radius: 0.6rem;
    box-shadow: 0 0 1em black;
    width: 150px;
    height: 35px;
    display: grid;
    place-content: center;
    font: 900 1.8em / 24px "Stoke", sans-serif;
}
    </style>
</head>
<body>
    <ul>
        <li>red</li>
        <li>green</li>
        <li>yellow</li>
        <li>coral</li>
        <li>gray</li>
        <li>violet</li>
    </ul>
    <script>
let liArr = document.getElementsByTagName('li');

async function bg(list) {
let modal = document.createElement('dialog');
document.body.append(modal);
dialogPolyfill.registerDialog(modal);
    for (const li of list)
        await new Promise(resolve => {
            const {textContent : color} = li;
            li.style.backgroundColor = modal.textContent = modal.style.color = color;
            modal.addEventListener('click', () => {modal.close();resolve()}, {once: true});
            modal.showModal();
        });
    modal.remove()
}
bg(liArr)
</script>
</body>
</html>

Malleys 03.01.2020 23:15
рони, это просто потрясающее применение Promise и <dialog>! Вы гений!

рони 03.01.2020 23:22
Malleys,
можно ли dialog запустить в Firefox без полифилла, или пока рано?

рони 04.01.2020 00:02
:write:
упрощённая версия (работает и в Firefox)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Stoke&display=swap');
dialog {
    padding: .5em;
    border-radius: 0.6rem;
    box-shadow: 0 0 1em black;
    width: 150px;
    height: 35px;
    display: grid;
    place-content: center;
    font: 900 1.8em / 24px "Stoke", sans-serif;
}


</style>
</head>
<body>
    <ul>
        <li>red</li>
        <li>green</li>
        <li>yellow</li>
        <li>coral</li>
        <li>gray</li>
        <li>violet</li>
    </ul>
    <script>
let liArr = document.getElementsByTagName('li');

async function bg(list) {
let modal = document.createElement('dialog');
document.body.append(modal);
modal.setAttribute('open','open');
    for (const li of list)
        await new Promise(resolve => {
            const {textContent : color} = li;
            li.style.backgroundColor = modal.textContent = modal.style.color = color;
            modal.addEventListener('click', resolve, {once: true});
        });
    modal.remove()
}
bg(liArr)
</script>
</body>
</html>

Aetae 04.01.2020 00:17
Цитата:
Сообщение от Malleys (Сообщение 518385)
вам следует «немного» подождать!
И получили уродство, которое парень преподу ни в жизнь не объяснит.

Цитата:
Сообщение от Malleys (Сообщение 518385)
Какой «баг»?
Я понимаю, вы из тех, кто кричит "ФИЧА!!!1111", уважает "серьёзных индусовпрограммистов из Гугла" и всё такое. Но это поведение - баг. Вызов alert так или иначе должен вызывать перерисовку перед появлением окошка. Да, alert по определению блокирует исполнение скрипта, но скрипт предшествующий появлению alert, точно также по определению, должен завершить свою работу. И если работой скрипта является смена цвета, alert не имеет права этому препятствовать. И никто меня в этом не переубедит.


Часовой пояс GMT +3, время: 00:23.