Apply function onclick function on $(document).ready - javascript

I have 3 divs that fades sequentially on page load just like on this link:
http://jsfiddle.net/x4qjscgv/6/ However, I want the fade function to happen once the user clicked a button. I tried to use the function: document.getElementById but it does not appear to be working.
See full code below:
<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>

You can follow my example. But note, id is only one instance, and class can has many instances!
$(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>

This line does select #btn, however it does not execute anything because the function declaration is incomplete:
document.getElementById('btn').onclick = function(e)
You must include the actions of the function like so:
document.getElementById('btn').onclick = function(e){
// add function within curly braces.
}
It's worth noting that the e is the Event object. Try adding console.log('test') and check the console (often accessed via right-click > "Inspect") for your messages.

The onclick function that you used indeed doesn't do anything, because you didn't wrapped your'e fade-in code by it. If you already using jquery, try using the click event handler, like so:
$(document).ready(function() {
$('#btn').click( function () {
$('.word1, .word2, .word3').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
});
});

Modify your example:
<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);
});

Related

Function inside addEventListener doesn't work

const bubbles = document.querySelectorAll('.bubble')
function filledBubble (event){
event.classList.toggle("filled");
}
bubbles.forEach((bubble) => {
bubble.addEventListener('click', filledBubble);
})
Hello everyone,
I was trying to apply an event to my bubbles. So when we click, it will change the color.
But somehow, I don't know why my function didn't work . Also, on the console, it showed no syntaxic error either.
Do you see any error in my code ?
The HTML code
<h3>Select</h3>
<div class="container">
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
</div>
As others have mentioned, the event.target.classList.toggle("filled") is the answer, but since you're saying it's not then you have the javascript initialization happening before the HTML has been rendered. In other words, put your javascript after your HTML.
OR, run the javascript initialzation after the page has loaded:
<head>
<script>
let bubbles
function initJS() {
bubbles = document.querySelectorAll('.bubble');
bubbles.forEach((bubble) => {
bubble.addEventListener('click', filledBubble);
});
}
function filledBubble (event){
this.classList.toggle("filled");
}
</script>
</head>
<body onload='initJS()'>
...
<h3>Select</h3>
<div class="container">
<div class="bubble"> bubble 1</div>
<div class="bubble"> bubble 2</div>
<div class="bubble"> bubble 3</div>
</div>
use event.target event.target.classList.toggle("filled")
or this this.classList.toggle("filled")
demo:
const bubbles = document.querySelectorAll('.bubble')
function filledBubble (event){
this.classList.toggle("filled");
}
bubbles.forEach((bubble) => {
bubble.addEventListener('click', filledBubble);
})
.bubble { margin: .5em; cursor: pointer; }
.filled { background-color: green; }
<h3>Select</h3>
<div class="container">
<div class="bubble"> bubble 1</div>
<div class="bubble"> bubble 2</div>
<div class="bubble"> bubble 3</div>
</div>

How to write a multiple click function that targets different divs?

I have numerous buttons on a page. Each is related to its own separate div on the page. When button 1 is clicked div 1 is shown. When button 2 is clicked div 2 is shown and so on.
What's the best way to write the following jQuery below, so I don't have to keep writing a new function for every new button and new div that will need to be added?
$("#bio-1").click(function () {
$('.one').toggle();
});
$("#bio-2").click(function () {
$('.two').toggle();
});
$("#bio-3").click(function () {
$('.three').toggle();
});
$("#bio-4").click(function () {
$('.four').toggle();
});
You can try using data-* attribute which on clicking you can use to find only the specific element to toggle.
Demo:
$("[id^=bio-").click(function () {
$(`div[data-id=${this.id}]`).toggle();
});
div{
width: 100%;
border: 1px solid lightgray;
margin: 5px;
padding: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="bio-1">Button-1</button>
<button id="bio-2">Button-2</button>
<button id="bio-3">Button-3</button>
<button id="bio-4">Button-4</button>
<div class="one" data-id="bio-1">One</div>
<div class="two" data-id="bio-2">Two</div>
<div class="three" data-id="bio-3">Three</div>
<div class="four" data-id="bio-4">Four</div>
It depends on how you initialize your display... hidden or all visible divs. This is like a toggle based on a common identifier that would let you keep your actual HTML code and shorten and organize your javascript code.
To use a toggle function, you should initialize your styles following the expected visibility logic.
$('div[data-id!=""]').hide();
$("[id^=bio-]").on("click", function () {
$('div[data-id!=""]').hide();
$('div[data-id="'+$(this).data('id')+'"]').show();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="bio-1" data-id="1">One</button>
<button id="bio-2" data-id="2">Two</button>
<button id="bio-3" data-id="3">Three</button>
<button id="bio-4" data-id="4">Four</button>
<div class="one" data-id="1">One</div>
<div class="two" data-id="2">Two</div>
<div class="three" data-id="3">Three</div>
<div class="four" data-id="4">Four</div>
Demo
you have to used toggle as well as show jquery function.
$(".clickBUtton").click(function () {
var id = this.id; // click class id
$("#DIV"+id).show(); // toggle and you also add show
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button class="clickBUtton" id="one">ONE</button>
<button class="clickBUtton" id="two">TWO</button>
<div id="DIVone" style="display:none;">one div</div>
<div id="DIVtwo" style="display:none;">two div</div>

jQuery user-defined function not executing in if statement

I am new to learning jQuery so I've been stumped with this for a while (and excuse me if my question is very obvious).
When the user loads the site, I want the screen to append square images continuously every 5 seconds, until they click "Click Me!" which stops it. The function runForever which appends the images works on it's own if I add '$' in front of '(function)', but inside my button click function, runForever doesn't run at all. I know it doesn't run because I added an alert statement for when the user loads the page, but the page never gives me this statement. It does, however, give me the alert for when I click 'Click Me!'.
$(document).ready(function() {
(function runForever() {
(".img-box").append("<div class='img-from-other-class'</div>");
setTimeout(runForever, 5000);
});
var clicked = false;
$("button").click(function() {
if (clicked == false) {
alert ("beginning repetition");
runForever();
}
else {
alert ("button clicked");
clicked = true;
return;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<h3>jQuery Practice</h3>
</div>
<div class="col-6">
<button class="float-right">
Click Me
</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="img-box">
<div class="img-from-other-class"></div>
</div>
</div>
</div>
</div>
</body>
style css in follow
.img-from-other-class{
width:50px;
height:50px;
background:red;
border-radius:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<button class="stop-btn">STOP</button>
<div class="image-box"></div>
<script>
$(function(){
function run(){
interval = setInterval(function(){
$('.image-box').append('<div class="img-from-other-class"></div>');
}, 5000);
}
run();
// click for stop append
$('.stop-btn').click(function(){
clearInterval(interval);
});
});
</script>
</body>
<html>

can we write script for the button which is inside the popover?

I have created a popover so that if I click on the image the popover should appear.
The popover is working. what my main problem is I have inserted buttons in the popover.
so I want to write javascript or jquery code for the button when it is clicked. Can anyone help on this?
I have tried but it's not working!!!!
$(function() {
$('button').click(function() {
var x = $(this).attr('class');
alert(x);
});
});
$(function() {
$("[data-toggle=popover]").popover({
html: true,
container: 'body',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
},
placement: "auto"
});
});
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./isobar.js">
</script>
<span>
<img src="./img/more_options_icon.png" data-toggle="popover" tabindex="5" data-trigger="focus" data-popover-content="#moreoptions">
</span>
<div id="moreoptions" class="hidden">
<div class="popover-body">
<div class="list-group">
<button type="button" class="list-group-item"><span class="gap"></span>Edit</button>
<button type="button" class="list-group-item"><span class="gap"></span>Logic Builder</button>
<button type="button" class="list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
O.k. Here is an updated version of my answer and checked and working code. A secret of a popover is to fire the correspondence function in a right time with a popover firing. So the JS code is:
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
Here I an using html selector
:not(.main)
to prevent binding and unbinding events to the main button. In addition, we have to pay attention on the fact that every popover rising binds a new event handler to each button. This means that after n popover risings every button will fire it's alert n times. To prevent this effect, it is possible to bind events in the first rising only, or as I did, to unbind an event from a button every popover rising. As to html code, here it is:
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
I only added the ".main" button to accept a simulation, and each button got additional corresponding class "class-0", "class-1", "class-2" for successful demonstration. Now, when you push on the main button, other 3 buttons appear. And to the contrary, pushing on any of those 3 buttons, is following by alert firing and disappearing of all of them. I hope this will help you.
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
.hidden {
display: none;
}
button {
float: left;
}
.class-0 {
clear: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>

jQuery $('body').on with parameter

I have function
$('body').on('click', '.urlsend', function ()
{
console.log("this.parameter");
}
and all elements with ".urlsend" have some parameter, which I need to pass to the function.
HTML looks like this:
<div id="canvas">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function loadImgs(){
<!--somecode-->
function gotData(arr){
var element="";
for(var i = 0;i<arr.data.length;i++)
{
var img = arr.data[i].images.original.url;
element += '<img src="'+img+'" class="urlsend" data-url="'+img+'">';
}
$('#canvas').html(element);
}
}
</script>
You can use .attr to get parameter or attribute of an HTML element.
$(document).ready(function() {
$('body').on('click', '.urlsend', function() {
console.log($(this).attr("parameter"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="urlsend" parameter="1"> urlsend DIV 1</div>
<div class="urlsend" parameter="2"> urlsend DIV 2</div>
<div class="urlsend" parameter="3"> urlsend DIV 3</div>
<div class="urlsend" parameter="4"> urlsend DIV 4</div>
Doc: http://api.jquery.com/attr/
this within the callback will be the specific .urlsend element that the event relates to, so you can access the information from this.
For instance, if the "parameter" is a data-info attribute:
console.log(this.getAttribute("data-info"));
or with more jQuery:
console.log($(this).attr("data-info"));
(Don't use .data(...) unless you want the features it provides, see this answer for details.)
try this
<script>
$(function(){
$('body').on('click' , ' .urlsend' , function(){
var url=$(this).data('url');
var user=$(this).data('user');
alert(url);
alert(user);
});
});
</script>
<body>
<button class="urlsend" data-url="google.com" data-user="kate">click</button>
</body>
hope this help you

Categories

Resources