Применить функцию onclick function к $ (document) .ready

У меня есть 3 блока, которые последовательно исчезают при загрузке страницы, как по этой ссылке: http://jsfiddle.net/x4qjscgv/6/ Однако я хочу, чтобы функция затухания срабатывала после того, как пользователь нажал кнопку. Я попытался использовать функцию document.getElementById, но она не работает.

Смотрите полный код ниже:

<html>

<head>
<script src = "http://code.jquery.com/jquery-latest.min.js"></script>
<script>

$(document).ready(function() {
  $('.word1, .word2, .word3').each(function(fadeIn) {
    $(this).delay(fadeIn * 500).fadeIn(1000);
  });
});

document.getElementById('btn').onclick = function(e)

</script>

<style>
    #chat {
      display: none;
    }
</style>

</head>

<body>

<button id = "btn"> fade divs </button>

<div id = "chat" class = "word1">Word 1</div>
<div id = "chat" class = "word2">Word 2</div>
<div id = "chat" class = "word3">Word 3</div>


<div id = "" class = "">Word 4</div>

</body>

</html>

Почему вы включаете две версии jQuery? Во-вторых, идентификаторы должен должны быть уникальными.

— 27.09.2018 04:52

извините, это была ошибка при добавлении локальной версии jquery

— 27.09.2018 04:55

javascript html css

27.09.2018 04:51

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

100

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Эта строка действительно выбирает #btn, однако ничего не выполняет, потому что объявление функции неполное: document.getElementById('btn').onclick = function(e)

Вы должны включить следующие действия функции:

document.getElementById('btn').onclick = function(e){
    // add function within curly braces.
}

Стоит отметить, что e - это Объект события. Попробуйте добавить console.info('test') и проверьте консоль (часто доступ к которой осуществляется через щелчок правой кнопкой мыши> «Проверить») на наличие ваших сообщений.

27.09.2018 05:09

Функция onclick, которую вы использовали, действительно ничего не делает, потому что вы не обернули ею свой код постепенного появления. Если вы уже используете jquery, попробуйте использовать обработчик события щелчка, например:

$(document).ready(function() {
    $('#btn').click( function () {
        $('.word1, .word2, .word3').each(function(fadeIn) {
            $(this).delay(fadeIn * 500).fadeIn(1000);
        });
    });
});

27.09.2018 05:12

Измените свой пример:

<div id = "chat1" class = "word">Word 1</div>
<div id = "chat2" class = "word">Word 2</div>
<div id = "chat3" class = "word">Word 3</div>

.word {
  display: none;
}

$(".word").click(function(e){
    $(this).delay(10).fadeOut(1000); 
});

27.09.2018 05:15

Ответ принят как подходящий

Вы можете последовать моему примеру. Но учтите, что id - это только один экземпляр, а у класса может быть много экземпляров!

  $(document).ready(function() {
    $('.word1, .word2, .word3').each(function(fadeIn) {
      $(this).delay(fadeIn * 500).fadeIn(1000);
    });
  });
  
  $("#btn").on('click', function(e){
    $('.word1, .word2, .word3').each(function(fadeIn) {
      $(this).delay(fadeIn * 500).fadeIn(1000);
    });
  });
  $("#btnhide").on('click', function(e){
    $('.chat').hide();
  });

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
  .chat {
    display: none;
  }
</style>
</head>
<body>

  <button id = "btn"> fade divs </button> <button id = "btnhide"> hide divs</button>
  
  <div class = "chat word1">Word 1</div>
  <div class = "chat word2">Word 2</div>
  <div class = "chat word3">Word 3</div>
  
  
  <div id = "" class = "">Word 4</div>
</body>

27.09.2018 05:17