Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.04.2019, 20:15
Новичок на форуме
Отправить личное сообщение для Иса Мирзоев Посмотреть профиль Найти все сообщения от Иса Мирзоев
 
Регистрация: 15.04.2019
Сообщений: 6

Вопрос по 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>


п.п.п.с. словом, идеи есть, попытки - тоже, страницы кода исписаны, а реализация хромает, практического навыка и помощи старших коллег недостает. Спасибо еще раз)

Последний раз редактировалось Иса Мирзоев, 22.04.2019 в 20:18.
Ответить с цитированием
  #2 (permalink)  
Старый 22.04.2019, 20:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,848

Иса Мирзоев,
<!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>
Ответить с цитированием
  #3 (permalink)  
Старый 22.04.2019, 21:08
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 799

<!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. Для каждого цвета из бесконечной последовательности цветов повторять: подождать пока наведут мышь, покрасить в цвет.
Ответить с цитированием
  #4 (permalink)  
Старый 22.04.2019, 21:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,848

Malleys,
можно пояснить почему getColors работает бесконечно по массиву?
Ответить с цитированием
  #5 (permalink)  
Старый 22.04.2019, 23:38
Новичок на форуме
Отправить личное сообщение для Иса Мирзоев Посмотреть профиль Найти все сообщения от Иса Мирзоев
 
Регистрация: 15.04.2019
Сообщений: 6

Всем спасибо, очень выручили) Все отлично работает)
Сообщение от рони Посмотреть сообщение
Malleys,
можно пояснить почему getColors работает бесконечно по массиву?
А у меня к Вам вопрос ( ++i % value.length) всегда замыкает конец цикла к началу?) Просто не могу понять условие: i = i + 1, пока это все делится без остатка на длину массива или как?
Ответить с цитированием
  #6 (permalink)  
Старый 22.04.2019, 23:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,848

Сообщение от Иса Мирзоев
( ++i % value.length) всегда замыкает конец цикла к началу?)
да.
возможно так будет проще понять
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>

Основные операторы
Ответить с цитированием
  #7 (permalink)  
Старый 23.04.2019, 09:04
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 799

Сообщение от рони
можно пояснить почему getColors работает бесконечно по массиву?
Строка 15 говорит, что используется бесконечный цикл.
Ответить с цитированием
  #8 (permalink)  
Старый 23.04.2019, 10:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,848

Malleys,
я понимаю что getColors будет работать бесконечно из-за while(true)
... видимо я не понимаю как работает строка 27, почему цикл по массиву бесконечен?
Ответить с цитированием
  #9 (permalink)  
Старый 23.04.2019, 11:22
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 799

Сообщение от рони
видимо я не понимаю как работает строка 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, 23.04.2019 в 11:25.
Ответить с цитированием
  #10 (permalink)  
Старый 23.04.2019, 11:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,848

Malleys,
уже больше понимания, тут
yield* xs;
yield* cycle(xs);
здесь вопросов нет, но как работет while(true) yield* недопонимаю.
спасибо за обьяснения.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
автоматическое удаление скоупа директивы при удаление dom узла FanAizu Angular.js 0 25.08.2015 21:38
Вопрос. Обращение к DOM элементам в фоне. sibirser Events/DOM/Window 2 20.07.2015 17:38
Есть вопрос от новичка в DOM и JavaScript ipman Events/DOM/Window 3 19.01.2011 09:05
Теоретический вопрос. gods33 (X)HTML/CSS 10 16.12.2010 22:49
Вопрос по объектам и DOM Hawk Events/DOM/Window 3 14.05.2008 14:04