Приветствую. Не могу придумать код, который менял бы содержимое 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>
п.п.п.с. словом, идеи есть, попытки - тоже, страницы кода исписаны, а реализация хромает, практического навыка и помощи старших коллег недостает. Спасибо еще раз)