2015-04-27 4 views
0

Я работаю над методом addClass для моего финального проекта. Я проверил все, чтобы убедиться, что нет опечаток, но нажатие на кнопку не меняет цвет текста.Почему мой метод addClass не работает?

Вот мой код:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Final Project: Home</title> 
     <style type="text/css"> 
     .theColor { 
     color: white; 
     } 
     </style> 
    </head> 
    <body> 
    <script src="jquery-2.1.3.js"></script> 
    <script src="script.js"></script> 
    <p><input id="theButton" type="button" value="Add Class!" /></p> 
    <h4 id="theText">Some Text</h4> 
    </body> 
</html> 

и вот мой JQuery код:

$('#theButton').click(function(){ 
    $('#theText').addClass('theColor'); 
}); 
+3

Ваш скрипт выполняется до того, как существует элемент '# theButton'. – Phil

+0

Точно как @Phil только что сказал. Вы вызываете свой скрипт до того, как ваш элемент существует. Если вы хотите сохранить его таким образом, по крайней мере используйте ** $ (document) .ready (function() {/ * code here * /}); ** – rottenoats

+0

Сдвиг по вашему вопросу немного суровый. По крайней мере, вы предоставили всю необходимую информацию, поэтому нам не приходилось гадать. +1 для хорошего вопроса – Phil

ответ

2

Вы должны ждать, пока не будет загружена страница, и только после этого связать событие:

$(document).ready(function(){ 
    $('#theButton').click(function(){ 
    $('#theText').addClass('theColor'); 
    }); 
}) 
+0

Это только один из многих доступных вариантов. Ответ на дублированный вопрос более полный. – Phil

+0

Я не помню, как мой профессор добавил, что. Спасибо! – Chawdiee

+0

@Chawdiee: Вы должны действительно просмотреть оригинальный вопрос, как сказал Фил, есть и другие варианты. – potashin

Смежные вопросы