How can I add a button and react to an outside onclick function?
I need it available as well for the generated button and for static buttons that are on the site. At the moment I have the function twice to make it work for both kind of buttons, but that seems kind of redundant.
button.on("click", function() {
banner.addClass("alt")
$("<br><button class='test'>TEST</button><br>").insertAfter(button);
//Here it works for the generated button:
$(".test").on("click", function() {
banner.removeClass("alt")
banner.addClass("alt2")
})
})
//Here it only works with the static buttons:
$(".test").on("click", function() {
banner.removeClass("alt")
banner.addClass("alt2")
})
https://jsfiddle.net/tdL3s4f8/
Add your click listener to parent container element handle in following ways. I chose document as parent you can have it more specific.
$(document).on('click', '.test', function(){
banner.removeClass("alt")
banner.addClass("alt2")
})
You need to search static ancestors (parent) of the dynamically added element. And bind certain event based on that parent.
var banner = $("#banner-message")
var button = $("button")
button.on("click", function() {
banner.addClass("alt")
$("<br><button class='test'>TEST</button><br>").insertAfter(button);
//This one works:
//$(".test").on("click", function() {
//banner.removeClass("alt")
//banner.addClass("alt2")
//})
})
//This one doesn't work:
$("#banner-message").on("click",".test", function() {
banner.removeClass("alt")
banner.addClass("alt2")
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt2 button {
background: #000;
color: #fff;
}
#banner-message.alt2 {
background: red;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<button>Change color</button>
</div>
Related
What I want to do is when I click the task it will have a line through the text means that I'm done with the task. but the add event listener function for this is not working, I'm working with the javascript toggle and that's all I can think of right now to achieve this functionality.
Is there another way to do this? I searched on the internet and it seems complicated when I'm trying to figure it out.
const addBtn = document.querySelector("#push");
const taskInput = document.querySelector("#taskInput");
const taskOutput = document.querySelector("#tasks");
addBtn.addEventListener("click", function() {
let newTasks = taskInput.value;
if (newTasks.length == 0) {
alert("Please enter a task");
} else {
taskOutput.innerHTML += `<div class="task">
<span id="taskname">${newTasks} </span>
<button class="delete" id="deleteButton"><i class="fa-solid fa-trash"></i> </button>
</div>
`;
//delete
let deleteBtn = document.querySelector("#deleteButton");
deleteBtn.addEventListener("click", function() {
this.parentNode.remove();
});
//line through
let theTask = document.querySelectorAll(".task");
theTask.addEventListener("click", function() {
this.classList.toggle("completed");
});
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient( 90deg, rgba(241, 206, 221, 1) 0%, rgba(124, 184, 254, 1) 100%);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Kumbh Sans', sans-serif;
}
.container {
border: 2px solid white;
width: 50%;
min-width: 450px;
margin: auto;
padding: 30px 40px;
}
#new-task {
position: relative;
background-color: white;
padding: 30px 20px;
border-radius: 1em;
}
#new-task input {
width: 70%;
height: 45px;
font-family: 'Manrope', sans-seif;
font-size: 1.2em;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-weight: 500;
position: relative;
border-radius: 5px;
}
#new-task input:focus {
outline: none;
border-color: violet;
}
#new-task button {
font-family: 'Manrope', sans-seif;
position: relative;
float: right;
width: 25%;
height: 45px;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
border: none;
background-color: violet;
color: white;
cursor: pointer;
}
#tasks {
background-color: white;
padding: 30px 20px;
margin-top: 50px;
border-radius: 10px;
width: 100%;
}
.task {
background-color: white;
height: 50px;
padding: 5px 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid violet;
cursor: pointer;
}
.task span {
font-size: 18px;
font-weight: 400;
}
.task button {
background-color: violet;
color: white;
height: 100%;
width: 40px;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.task button:hover {
background-color: red;
}
.completed {
text-decoration: line-through;
}
<body>
<div class="container">
<div id="new-task">
<input type="text" name="" id="taskInput" placeholder="Task to be done" />
<button id="push">ADD</button>
</div>
<div id="tasks"></div>
</div>
<script src="/script.js"></script>
</body>
querySelectorAll will return the list of nodes matching the selector tasks. So you have to iterate through each of those nodes and add your listener. See the below code snippet
let theTasks = document.querySelectorAll(".task");
theTasks.forEach((task) => {
task.addEventListener("click", function() {
this.classList.toggle("completed");
});
});
theTask is a list of nodes. Trying to attach event listener on this list is causing issues.
Also, you will be inserting lots of buttons with same id deleteButton and spans with same id taskname which is incorrect and can cause undefined behavior.
For theTask fix, you may want to do something like:
let theTasks = [...document.querySelectorAll(".task")];
theTasks.forEach(task => {
task.addEventListener("click", function() {
this.classList.toggle("completed");
})
});
Using innerHTML to create manipulate the DOM for an application like a todo list is probably not a good idea. The answers to Advantages of createElement over innerHTML? give good explanations why.
It is worth noting that in the innerHTML code, the span and the button are created with an id and so all of these elements will have the same id. It is also probably not a good idea to have duplicate ids on one page. Why are duplicate ID values not allowed in HTML? explains why.
Also, adding event listeners to every new task is also probably not a good idea. What is DOM Event delegation? gives a good explanation why.
Finally, the Difference between HTMLCollection, NodeLists, and arrays of objects and Document.querySelectorAll() explain how to get lists of elements that can be manipulated.
So, I have rewritten the task creation code in the addBtn.addEventListener to show one way how this could be done with document.createElement().
And I have created a separate event listener on the Tasks container div, which handles both task deletion and task completion.
I also added the following CSS so that clicking on a trash can icon is handled by the parent button. Without this CSS, clicking on an icon would not delete the task.
div#tasks i {
pointer-events: none;
}
To make the todo list more visible in the code snippet below, I reduced the heights, margins, and paddings of some of the elements in the CSS.
I also added a link to the font awesome icon library.
const addBtn = document.querySelector("#push");
const taskInput = document.querySelector("#taskInput");
const taskOutput = document.querySelector("#tasks");
taskOutput.addEventListener("click", function(event) {
if (event.target && event.target.nodeName === "SPAN") {
event.target.classList.toggle("completed");
}
if (event.target && event.target.nodeName === "BUTTON") {
event.target.parentNode.remove();
}
});
addBtn.addEventListener("click", function() {
let newTasks = taskInput.value;
if (newTasks.length == 0) {
alert("Please enter a task");
} else {
// Create a task DIV
const newTaskElement = document.createElement("div");
newTaskElement.classList.add("task");
// Create a SPAN with the task name
const newTaskNameElement = document.createElement("span");
const taskTextnode = document.createTextNode(newTasks);
newTaskNameElement.appendChild(taskTextnode);
// Create a BUTTON with a TRASH CAN ICON
const newTaskDeleteButton = document.createElement("button");
const deleteImageElement = document.createElement("i");
deleteImageElement.classList.add("fa-solid", "fa-trash");
newTaskDeleteButton.appendChild(deleteImageElement);
// Append the SPAN and the BUTTON to the task DIV
newTaskElement.appendChild(newTaskNameElement);
newTaskElement.appendChild(newTaskDeleteButton);
// Append the task DIV to the TASK LIST DIV
taskOutput.appendChild(newTaskElement);
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient( 90deg, rgba(241, 206, 221, 1) 0%, rgba(124, 184, 254, 1) 100%);
font-family: 'Kumbh Sans', sans-serif;
}
/* ADDED TO MAKE SURE THAT THE TRASH ICON DOES NOT PROCESS CLICKS */
div#tasks i {
pointer-events: none;
}
.container {
border: 2px solid white;
width: 50%;
min-width: 450px;
margin: auto;
padding: 3px 4px;
}
#new-task {
position: relative;
background-color: white;
padding: 6px 4px;
border-radius: 1em;
}
#new-task input {
width: 70%;
height: 45px;
font-family: 'Manrope', sans-seif;
font-size: 1.2em;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-weight: 500;
position: relative;
border-radius: 5px;
}
#new-task input:focus {
outline: none;
border-color: violet;
}
#new-task button {
font-family: 'Manrope', sans-seif;
position: relative;
float: right;
width: 25%;
height: 45px;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
border: none;
background-color: violet;
color: white;
cursor: pointer;
}
#tasks {
background-color: white;
padding: 6px 4px;
margin-top: 5px;
border-radius: 10px;
width: 100%;
min-height: 50px;
}
.task {
background-color: white;
height: 50px;
padding: 5px 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid violet;
cursor: pointer;
}
.task span {
font-size: 18px;
font-weight: 400;
}
.task button {
background-color: violet;
color: white;
height: 100%;
width: 40px;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.task button:hover {
background-color: red;
}
.completed {
text-decoration: line-through;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet" />
<div class="container">
<div id="new-task">
<input type="text" name="" id="taskInput" placeholder="Task to be done" />
<button id="push">ADD</button>
</div>
<div id="tasks"></div>
</div>
This is the button:
<button id="get-away">LEAVE SITE</button>
The reason why I made it get-away? I added this Jquery and Javascript functionality to it:
function getAway() {
// Get away right now
window.open("http://weather.com", "\_newtab");
// Replace current site with another benign site
window.location.replace('http://google.com');
}
$(function() {
$("#get-away").on("click", function(e) {
getAway();
});
$("#get-away a").on("click", function(e) {
// allow the link to work
e.stopPropagation();
});
$(document).keyup(function(e) {
if (e.keyCode == 27) { // escape key
getAway();
}
});
});
Now, how do I add the CSS to this button? This is my css btw:
.get-away {
border: none;
color: red;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.get-away {background-color: red;} /* red*/
if you want to add .get-away class to your #get-away button on click
$("#get-away").on("click", function(e) {
$("#get-away").toggleClass("get-away");
getAway();
});
you are givving an id to button and applying the css with ".get-away" it should be "#get-away" for understanding basic of class and Id check this link classVsId
#get-away {
border: none;
color: #fff;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#get-away {
background-color: red;
} /* red*/
<button id="get-away">LEAVE SITE</button>
There is a div which appear after one third scrolling on the page. There is a close button inside that. By clicking the close button, div will be disappear for next 10 minutes (for testing purpose, lets time is 5 seconds) even after reloading the page. I can't write jQuery properly for this.
Here is the fiddle of my work. Main issue is after reloading the page, if I suddenly scroll after clicking on close button, hidden div is appeared without waiting for 5 seconds.
var closeOnce;
var hide = localStorage.getItem('hide');
function showDiv() {
if ($(window).scrollTop() > $('body').height() / 5) {
$('#banner-message').slideDown();
}
};
function countDown() {
setTimeout(function(){
closeOnce = false;
showDiv();
}, 5000);
};
$('body').on('click', '.close', function() {
$('#banner-message').slideUp();
closeOnce = true;
localStorage.setItem('hide', 'true');
countDown();
});
$(window).on('scroll', function() {
if(!hide) {
if (!closeOnce) {
showDiv()
}
} else {
countDown();
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.instruction {
background: #ccc;
height: 600px;
margin-bottom: 40px;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
display: none;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="instruction">
<h1>Scroll down to appear a div</h1>
</div>
<div id="banner-message">
<p>Hello World</p>
<button class="close">close</button>
</div>
If you don't mind using cookies, you could install the jQuery cookie plugin and set one with the current timestamp when the close button is clicked:
$('body').on('click', '.close', function() {
$.cookie('closed', new Date().getTime());
});
Then on scroll you check the difference between the current time and the time the button was clicked (if any)
$(window).on('scroll', function() {
var closeTime = $.cookie('closed');
if (closeTime) {
var diff = new Date().getTime() - closeTime;
if (diff > 10 * 60 * 1000) {
$.removeCookie('closed');
// show div
}
}
});
I should note that you don't need this plugin to set/read/delete cookies, but since you're using jQuery anyway this is the simplest solution.
You are over complicating things, and setTimeout won't remember the time after you refresh the page, it will just restart the timer, so you need to set localStorage on hidden time and compare with current time on scroll:
https://jsfiddle.net/vzatgnrm/9/
//scroll function
$(window).on('scroll', function() {
//compare differene between hidden and current time, 5 seconds or if hidden time is null
if(new Date().getTime() - localStorage.getItem("hiddenTime") > 5000 || localStorage.getItem("hiddenTime") == null) {
if ($(window).scrollTop() > $('body').height() / 5) {
$('#banner-message').slideDown();
}
}
});
//close button click
$('body').on('click', '.close', function() {
$('#banner-message').slideUp();
//set closed time to storage
localStorage.setItem("hiddenTime", new Date().getTime())
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.instruction {
background: #ccc;
height: 600px;
margin-bottom: 40px;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
display: none;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<div class="instruction">
<h1>Scroll down to appear a div</h1>
</div>
<div id="banner-message">
<p>Hello World</p>
<button class="close">close</button>
</div>
Basically I am having a third party plugin that is adding a button on the click of this button a specific function is done.
Now I am wrapping this button into a div. Now I want that when I click on this wrapper div then it should click the button that is inside it.
// find elements
var banner = $("#banner-message")
var button = $("button")
banner.click(function() {
console.log('Parent is calling child');
button.trigger('click');
// What shall I place here to stop parent calling itself
})
// This is 3rd party service that is handling this.
button.on("click", function() {
console.log('I am called here');
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<button>Change color</button>
</div>
Demo : https://jsfiddle.net/8a33n7qg/
Problem : On div click => button click is done => button click is again propagated to parent => then again button click and so on.
So I want to stop this after first time, I can't change the third party plugin and I am avoiding global solutions. Is there any easy solution ?
Note : I CAN'T CHANGE THE BUTTON CODE, SINCE IT COMING FROM THIRD PARTY PLUGIN
Thank You for your time
Your need to place a call to stopPropagation() in the event raised from the child button, not the parent div as your comments suggest:
var $banner = $("#banner-message");
var $button = $("button");
$banner.click(function(){
console.log('Parent is calling child');
$button.trigger('click');
})
$button.on("click", function(e) {
e.stopPropagation();
console.log('I am called here');
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<button>Change color</button>
</div>
I can't change the third party plugin, I have tried to show a demo with small code, the button click is handled in third part plugin.
In this case you can use the target property of the click event on the div to check if the button was the triggering element, and do nothing if so:
var $banner = $("#banner-message");
var $button = $("button");
$banner.click(function(e) {
if ($(e.target).is('button'))
return false;
console.log('Parent is calling child');
$button.trigger('click');
})
$button.on("click", function() {
console.log('I am called here');
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<button>Change color</button>
</div>
Just use event.stopPropagation() in button on handler to stop propagating the event.
I have three divs as below:
Here is a JSFiddle.
$(document).on('click', '.top', function (e) {
console.log("Empty space clicked");
});
.top{
width: 208px;
text-transform: uppercase;
text-align: left;
height: 34px;
background-color: #F44336;
border-bottom: 1px solid #ea1c0d;
color: #ffffff;
box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.1);
padding: 3px 8px;
cursor: auto;
}
.inner_1{
font-size: 12px;
}
.inner_2{
font-size: 11px;
text-transform: none;
line-height: 12px;
margin-top: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.inner_1:hover, .inner_2:hover {
cursor: pointer;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="top">
<div class="inner_1">Top content: This is full width</div>
<div class="inner_2">Bottom</div>
</div>
As you can see from the jsfiddle, when the .top is clicked, it shows a log.
However, I want to make it so that it shows the log ONLY when the empty space is clicked and not when inner_1 or inner_2 div class is clicked (as it shows the log when these two classes are clicked as of now).
What is the best way to achieve this?
Thanks.
Use stopPropagation from jquery. This will stop all child divs from triggering parent onClick
$(document).on('click', '.top > div', function (e) {
e.stopPropagation();
});
Edit:
Code above was building on what OP knows but this way is more efficient for the browser.
$('.top > div').on('click', function (e) {
e.stopPropagation();
});