Вопрос по 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* недопонимаю. спасибо за обьяснения. |
Цитата:
Тоже самое, что перебирать [1, 2, 3]
function* () {
yield 1;
yield 2;
yield 3;
}
Тоже самое, что перебирать [1, 2, 3]
function* () {
for(var i = 1; i < 3; i++)
yield i;
}
Эти два примеры выше можно ведь легко переделать в бесконечный список... Тоже самое, что перебирать cycle([1, 2, 3])
function* () {
while(true) {
yield 1;
yield 2;
yield 3;
}
}
Тоже самое, что перебирать cycle([1, 2, 3])
function* () {
while(true) {
for(var i = 1; i < 3; i++)
yield i;
}
}
Этот последний пример можно переделать так... Тоже самое, что перебирать cycle([1, 2, 3])
function* () {
while(true) {
yield* [1, 2, 3];
}
}
|
Цитата:
|
Цитата:
У нас есть
function* () {
while(true) {
yield* [1, 2, 3];
}
}
мы можем уменьшить цикл на одну итерацию...
function* () {
yield* [1, 2, 3];
while(true) {
yield* [1, 2, 3];
}
}
и ещё...
function* () {
yield* [1, 2, 3];
yield* [1, 2, 3];
while(true) {
yield* [1, 2, 3];
}
}
и ещё...
function* () {
yield* [1, 2, 3];
yield* [1, 2, 3];
yield* [1, 2, 3];
while(true) {
yield* [1, 2, 3];
}
}
и ещё...
function* () {
yield* [1, 2, 3];
yield* [1, 2, 3];
yield* [1, 2, 3];
yield* [1, 2, 3];
while(true) {
yield* [1, 2, 3];
}
}
поскольку это бесконечный цикл, то полностью его невозможно размотать. UPD Цитата:
function* cycle(xs) {
yield* xs;
yield* cycle(xs);
}
можно попытаться раскрыть эту рекурсию...
function* cycle(xs) {
yield* xs;
yield* xs;
yield* cycle(xs);
}
и ещё...
function* cycle(xs) {
yield* xs;
yield* xs;
yield* xs;
yield* cycle(xs);
}
естественно при полном раскрытии (бесконечное кол-во строчек с yield* xs;) вы никогда не достигнете последнего yield* cycle(xs); то можно переписать так...
function* cycle(xs) {
while(true)
yield* xs;
}
Вы понимаете, что это одно и тоже определение, только без рекурсии?UPD 2 внутри тела функции-генератора... yield* xs;означает тоже самое, что for(const x of xs) yield x; Цитата:
while(true) for(const x of xs) yield x; |
Malleys,
ок, наверно на сейчас достаточно, приму как данность, пока для меня это магия и ниндзя стиль js, я могу это использовать, но нет понятия, почему это |
| Часовой пояс GMT +3, время: 03:45. |