Add the onclick function to $(document).ready for applying the desired functionality

Question

Add the onclick function to $(document).ready for applying the desired functionality

I've been trying to create a fading effect for 3 divs on my page, similar to the one in this example: http://jsfiddle.net/x4qjscgv/6/ However, I want the fade animation to trigger only when a user clicks a button. I attempted to use the document.getElementById function but it doesn't seem to be working as expected.

Below is the complete code snippet:

<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>

javascript html css

Answer 1

Answer №1

Feel free to take inspiration from my approach. Remember, an id is unique while a class can be used for multiple elements!

$(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>

Answer 2

Feel free to take inspiration from my approach. Remember, an id is unique while a class can be used for multiple elements!

$(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>

Answer 3

Answer №2

Although this line selects #btn, it does not execute properly because the function declaration is incomplete:

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

To make it work, you need to include the actions of the function like this:

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

Remember that the variable e represents the Event object. Try adding console.log('test') and then check the console (usually accessed via right-click > "Inspect") for your output messages.

Answer 4

Although this line selects #btn, it does not execute properly because the function declaration is incomplete:

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

To make it work, you need to include the actions of the function like this:

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

Remember that the variable e represents the Event object. Try adding console.log('test') and then check the console (usually accessed via right-click > "Inspect") for your output messages.

Answer 5

Answer №3

It seems that the onclick function you used is not functioning as intended because you did not enclose your fade-in code within it. If you are already utilizing jQuery, consider using the click event handler, like this:

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

Answer 6

It seems that the onclick function you used is not functioning as intended because you did not enclose your fade-in code within it. If you are already utilizing jQuery, consider using the click event handler, like this:

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

Answer 7

Answer №4

Revise your demonstration:

<div id="chat1" class="term">Term 1</div>
<div id="chat2" class="term">Term 2</div>
<div id="chat3" class="term">Term 3</div>

.term {
  display: none;
}

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

Answer 8

Revise your demonstration:

<div id="chat1" class="term">Term 1</div>
<div id="chat2" class="term">Term 2</div>
<div id="chat3" class="term">Term 3</div>

.term {
  display: none;
}

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

Add the onclick function to $(document).ready for applying the desired functionality

Answer №1

Answer №2

Answer №3

Answer №4

Revise your demonstration:

Similar questions

Tips for manipulating observableArray information retrieved through the $.getJSON method

What is the best way to insert a JavaScript variable into a filter while using ng-repeat?

The function is trying to access a property that has not been defined, resulting in

The Facebook Customer Chat Plugin embedded within an iframe

Enable the ability to input a value of -1 by clicking on a button or link, but only allow it once (the first click) without needing to disable the button or

Creating a task list without using JavaScript in the web browser and without relying on a database

Is there a way to automatically shorten a text when it goes beyond the boundaries of a div container?

Issue with JQM popup functionality in Firefox browser

Creating dynamic form fields in Flask WTForm based on user's previous selection is a useful feature that can be achieved with some

Once you address a block using jQuery

A Vue computed property is returning the entire function instead of the expected value

What steps can be taken to avoid triggering ng-drop-success upon clicking?

Python Ordering menu items for the Pelican restaurant

Creating 3D models in three.js

HTML or JS/jQuery can create disorienting cursor behaviors

How to efficiently remove duplicate items from multiple select dropdowns in Angular using ng-repeat?

Managing asynchronous tasks that do not save their outcomes within the application state

Does the padding attribute get passed down in CSS?

Is there a method to navigate through nested JSON accessors without prior knowledge of the nested keys? The table is encountering an error

Using only native JavaScript Vanilla, Rails does not execute create.js via Ajax