Ошибки с изменением цвета заголовка

Question

У меня есть веб-страница Я разрабатываю html, css и JS. Я правильно их подключил, но по какой-то причине мой заголовок не будет делать то, что я хочу. Я пробовал все, кто-нибудь знает, где я ошибся?

Я хочу, чтобы при наведении указателя мыши на заголовок или на заголовок, цвет изменится. Этого не происходит.

Важный код в JS-Fiddle: https://jsfiddle.net/DITTO/c37zxdke/

//javascript 
var col = document.getElementById("webTitle").style.color; 

function orangeToBlue() { 
    col = "#197CFF"; 
} 
function blueToGreen() { 
    col = "#19FF29"; 
} 
function greenToPink() { 
    col = "#FF19EF"; 
} 
function pinkToOrange() { 
    col = "#FF9C19"; 
} 



function changeColor() { 
    if (document.getElementById("webTitle").style.color === "#FF9C19") { 
     orangeToBlue(); 
} else if (document.getElementById("webTitle").style.color === "#197CFF") { 
     blueToGreen(); 
    } else if (document.getElementById("webTitle").style.color === "#19FF29") { 
     greenToPink(); 
    } else if(document.getElementById("webTitle").style.color === "#FF19EF") { 
     pinkToOrange(); 
    } 
} 


//html 
<h1 id="webTitle" onmouseover="changeColor()">Webpage Title</h1> 


//css 
#webTitle:hover { 
    cursor: pointer; 
} 
#webTitle { 
    text-shadow: 3.5px 3.5px 0px rgba(0, 0, 0, 0.3); 
    font-size: 100px; 
    font-family: fantasy; 
    color: #FF9C19; 
} 

Answer 1

Сценарий, который я опубликовал совсем недавно под руководством работы g4u, скрипка не работает. FIDDLE БРОКЕН! Попробуйте в блокноте и запустите его.

Answer 2

Ваши функции orangeToBlue(), blueToGreen(), greenToPink() и pinkToOrange() не делает никакого эффекта, хотя они называют , они просто определяют переменную, ничего больше.

Answer 3

Вы пытались получить то, что document.getElementById("webTitle").style.color выход?

Когда я регистрирую это действие, он дает мне пустую строку, вы можете подтвердить?

Если у вас такая же пустая строка, то посмотрите на это post ответ выглядит действительно хорошо и имеет хорошие ссылки.

Или вы можете просто посмотреть на это answer (из дубликата).

Надеюсь, это поможет вам немного.

И ответ Эдуардо Эскобара тоже важен.

Answer 4

Вы должны использовать значения цвета rgb (rrr, ggg, bbb) в javaScript на месте использования значений цвета #rrggbb и CSS для установки исходного цвета для вашего текста.

//javascript 

     document.getElementById("webTitle").style.color = "#197CFF"; 
     function orangeToBlue() { 
      document.getElementById("webTitle").style.color = "#197CFF"; 
     } 

     function blueToGreen() { 
      document.getElementById("webTitle").style.color = "#19FF29"; 
     } 

     function greenToPink() { 
      document.getElementById("webTitle").style.color = "#FF19EF"; 
     } 

     function pinkToOrange() { 
      document.getElementById("webTitle").style.color = "#FF9C19"; 
     } 



     function changeColor() { 
      if (document.getElementById("webTitle").style.color === "rgb(255, 156, 25)") { 
       orangeToBlue(); 
      } 
      else 
      if (document.getElementById("webTitle").style.color === "rgb(25, 124, 255)") { 
       blueToGreen(); 
      } 
      else 
      if (document.getElementById("webTitle").style.color === "rgb(25, 255, 41)") { 
       greenToPink(); 
      } 
      else 
      if (document.getElementById("webTitle").style.color === "rgb(255, 25, 239)") { 
       pinkToOrange(); 
      } 
     } 


//html 
<h1 id="webTitle" onclick="changeColor()" style="color: #FF9C19;" >Webpage Title</h1> 



//css 
#webTitle:hover { 
      cursor: pointer; 
     } 
     #webTitle { 
      text-shadow: 3.5px 3.5px 0px rgba(0, 0, 0, 0.3); 
      font-size: 100px; 
      font-family: fantasy; 
     }