Замена содержимого тега абзаца на случайное слово из javascript

Question

Когда пользователь входит на страницу, я хотел бы, чтобы div находился в центре с заголовком, под ним была выбрана цитата, которая случайно выбрана из списка и кнопка для входа на сайт , Это все хорошо и хорошо, но я не могу заставить кнопку исчезать на главном сайте и исчезать из посадочного div. Вот jsfiddle, чтобы попытаться объяснить больше.

JSFIDDLE

Как вы, вероятно, будете в состоянии сказать, я не большой с JavaScript или JQuery и то, что я сделал до сих пор от обучения обрывков и серфинга в Интернете с помощью примеров кода

Я не понимаю, почему это не сработает, поскольку у меня была игра в jsfiddle с упрощенной версией того, что я хочу сделать, и это сработало.

Simplified Version

Ниже кода упрощенная версия (Он не позволил бы мне писать без добавления кода?)

HTML

<div class="landingDiv"> 
    <h1>LANDING DIV</h1> 
    <button id="showMain">Enter Site</button> 
</div> 

<div class="main"> 
    <h1>Main Site</h1> 
</div> 

Jquery

$("#showMain").click(function() { 
    $(".main").fadeIn(1000); 
    $(".landingDiv").fadeOut(1000); 
}); 

CSS

.main { 
display: none; 
opactiy: 0; 
} 

Спасибо в продвижении.

Steve.

Answer 1

Первый пример JQuery бросили ошибку:

$ is not defined 

Значение JQuery не определен/включен. Который не был. Но во втором jsFiddle вы включили jQuery.

Вы увидите, что в левой части jsfiddle вы увидите, что под заголовком «Framewords & Extensions» вы можете включить Framewordk, поэтому включите jQuery!

Вот обновленная скрипка с JQuery включена: http://jsfiddle.net/6cGHF/1/

По мере продвижения вперед в своем развитии JavaScript, это всегда хорошая идея, чтобы проверить браузеры инструментов разработчика на наличии ошибок, когда что-то неожиданное происходит. Это всегда помогает вам, и когда вы задаете вопросы по StackOverflow, предоставление этих ошибок помогает нам! :)

Ярлык для инструментов разработчика в Chrome - F12 - вы можете увидеть небольшой красный круг с X в нем, если у вас есть ошибки - щелкните его для получения дополнительной информации. Но инструменты разработчика также доступны в других основных браузерах (кроме IE8 и ниже).

---

Edit:

Оберните функцию click() событий в $(document).ready()

$(document).ready(function() { 
    $("#showMain").click(function() { 
     $(".main").fadeIn(1000); 
     $(".landingDiv").fadeOut(1000); 
    }); 
}); 

Что Происходящее было то, что ваш файл HTML читается сверху вниз. Таким образом, он достиг бы вашей функции click до того, как элемент #showMain был прочитан. Таким образом, jQuery не смог найти его.

Причина, по которой это не проблема в jsFiddle, заключалась в том, что весь код JavaScript был обернут функцией «onLoad» (которая, по общему признанию, немного отличается от $(document).ready()), но она решила эту проблему для вас, выполнив вашу JavaScript после того, как все уже загружено. Вы можете видеть, что в левой части скрипта, который я связал выше, вы увидите раскрывающийся список с выбранным «onLoad». В нем вы можете также выбрать "OnDomready" (что было бы эквивалентно $(document).ready())

Резюмируя:

• НЕ использование $(document).ready() в jsFiddle. Вам это не нужно.
• DO Использование $(document).ready() вокруг javascript, основанный на том, что DOM готов (т. Е. Все ваше содержимое видно на вашем JavaScript »).

Answer 2

Проблема в вашей скрипке заключается в том, что вы не добавили jQuery, поэтому, когда вы пытаетесь ссылаться на нее с помощью '$', возникает ошибка javascript. Просто добавьте ссылку на библиотеку jQuery, и ваша скрипка работает, чтобы погладить кнопку при нажатии.

Answer 3

Ваши проблемы:

1) Добавить библиотеку Jquery к вашей скрипке.

2) Удалить opacity:0; от .main в вашем CSS. Достаточно display:none;.

3) Используйте это, чтобы исчезнуть из/в элементах:

$("#showMain").click(function() { 
    $(".landingDiv").fadeOut(1000, function() { 
     $(".main").fadeIn(1000); 
    }) 
});