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

Вопрос по 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.
Ответить с цитированием