Форум

Andriy_co2020k29z8d23 · #1 (**permalink**) 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 · #2 (**permalink**) 03.01.2020, 21:41

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

Andriy_co2020k29z8d23 · #3 (**permalink**) 03.01.2020, 21:45

Сообщение от Aetae

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

Цитата:

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

можно как-то это обойти??

рони · #4 (**permalink**) 03.01.2020, 22:11

Andriy_co2020k29z8d23,

Сообщение от Andriy_co2020k29z8d23

i<= liArr.length

не бывает элементов списка(массива) с индексом равным length этого списка(массива)

Aetae · #5 (**permalink**) 03.01.2020, 22:14

Сообщение от Andriy_co2020k29z8d23

можно как-то это обойти??

Может быть, как-то через зад, но желания ковыряться (в заду, ага) нет совершенно. В реальной жизни такое никогда не потребуется. В принципе alert никогда не потребуется. А коли это задачка - код абсолютно правильный(учитывая поправку рони), просто показывайте результат в другом браузере; если спросят почему - так и говорите - баг. Вы пока учитесь программировать, а не костылями жонглировать.

Malleys · #6 (**permalink**) 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...

рони · #7 (**permalink**) 03.01.2020, 23:12

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 · #8 (**permalink**) 03.01.2020, 23:15

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

рони · #9 (**permalink**) 03.01.2020, 23:22

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

рони · #10 (**permalink**) 04.01.2020, 00:02

упрощённая версия (работает и в 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>

Форум

Справочник

Discord чат

Курсы javascript