Вопрос по DOM
Приветствую. Не могу придумать код, который менял бы содержимое div-элемента по движению мыши несколько раз. Точнее, могу, но не более 2 движений. Мне же нужно, чтобы по каждому движению мыши, сколько бы их ни было, вписывались заранее заготовленные слова. Прошу помочь скорректировать код или продемонстрировать Ваш вариант кода (желательно, несложный). Спасибо.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="text.css">
<title>Тест
</title>
</head>
<body>
<div class="text">Цвет</div>
<script>
var text = document.getElementsByClassName("text")[0];
text.onmouseover = function(){
text.style.color = "red";
text.innerHTML = "Красный";
if(text.innerHTML = "Красный"){
text.onmouseover = function(){
text.style.color = "yellow";
text.innerHTML = "Желтый";
}
}
else if(text.innerHTML = "Желтый"){
text.onmouseover = function(){
text.style.color = "green";
text.innerHTML = "Зеленый";
}
}
}
</script>
</body>
</html>
п.с. если детальнее, то мой код не отображает слово "Зеленый", хотя я провожу по строке "Желтый" и по идее соблюдаю условие. п.п.с. пробовал с массивами и циклами, но мой код не прощелкивается по одному, а перескакивает сразу на последний элемент.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="text.css">
<title>Тест
</title>
</head>
<body>
<div class="text">Цвет</div>
<script>
var text = document.getElementsByClassName("text")[0];
var value = ["Красный", "Желтый", "Зеленый"];
text.onmouseover = function(){
for(i = 0; i < value.length; i++){
text.innerHTML = value[i];
}
}
</script>
</body>
</html>
п.п.п.с. словом, идеи есть, попытки - тоже, страницы кода исписаны, а реализация хромает, практического навыка и помощи старших коллег недостает. Спасибо еще раз) |
Иса Мирзоев,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="text.css">
<title>Тест
</title>
</head>
<body>
<div class="text">Цвет</div>
<script>
var text = document.getElementsByClassName("text")[0];
var value = ["Красный", "Желтый", "Зеленый"];
var i = 0;
text.onmouseover = function(){
text.innerHTML = value[i];
i = ++i % value.length
}
</script>
</body>
</html>
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="text.css">
<title>Тест</title>
</head>
<body>
<div class="text">Цвет</div>
<script>
var textElement = document.querySelector(".text");
function* getColors() {
while(true) yield* [
{ color: "red", "text": "Красный" },
{ color: "gold", "text": "Жёлтый" },
{ color: "green", "text": "Зелёный" },
];
}
async function mouseOver() {
return new Promise(resolve => textElement.onmouseover = resolve);
}
(async function main() {
for(const { color, text } of getColors()) {
await mouseOver();
textElement.style.color = color;
textElement.textContent = text;
}
})();
</script>
</body>
</html>
Всё происходит внутри функции main. Для каждого цвета из бесконечной последовательности цветов повторять: подождать пока наведут мышь, покрасить в цвет. |
Malleys,
можно пояснить почему getColors работает бесконечно по массиву? |
Всем спасибо, очень выручили) Все отлично работает)
Цитата:
|
Цитата:
возможно так будет проще понять i = i + 1;//i увеличили на 1 i = i % value.length;//в i сохранили остаток от деления
<script>
var length = 3, n = 0;
for (var i = 0; i < 50; i++) {
document.write(n + "<br>");
++n;
n %= length;
}
</script>
Основные операторы |
Цитата:
|
Malleys,
я понимаю что getColors будет работать бесконечно из-за while(true) ... видимо я не понимаю как работает строка 27, почему цикл по массиву бесконечен? |
Цитата:
Для того, чтобы у вас получилось понять, можно это рассмотреть! Давайте рассмотрим массив ["a", "b", "c"]. Вы его можете перебрать и получится три вхождения. Но что, если вы хотите, чтобы после того, как при перечислении был достигнут последний элемент, то вместо того, чтобы закрывать итератор, мы пойдём дальше сначала списка? Мы можем создать функцию, которая приводит любой список к такому перечислению! Назовём её cycle...
function* cycle(xs) {
yield* xs;
yield* cycle(xs);
}
// дополнительная функция, которая берёт определённое кол-во элементов списка
function* take(n, i) {
for(const v of i) {
if(n-- <= 0) break;
yield v;
}
}
console.log([...take(10, cycle(["a", "b", "c"]))]);
console.log([...take(10, cycle("123"))]);
В посте №3 тогда функция getColors не нужна, а строка 27 может быть выражена так...
const colors = [
{ color: "red", "text": "Красный" },
{ color: "gold", "text": "Жёлтый" },
{ color: "green", "text": "Зелёный" },
];
for(const { color, text } of cycle(colors)) {
|
Malleys,
уже больше понимания, тут yield* xs; yield* cycle(xs); здесь вопросов нет, но как работет while(true) yield* недопонимаю. спасибо за обьяснения. |
| Часовой пояс GMT +3, время: 07:08. |