We Keep Coding

How to click one id from a list of ids?

I have a list of ids, when one of them is clicked I want to give it the attribute .className="open.
So far what I've done is to put all ids in a list and try to loop through them.
const memberB = document.querySelectorAll('#memberA, #memberAA, #memberAAA ');
for (var i = 0; i < memberB.length; i++) {
memberB[i].onclick = function(){
alert(memberB[i])
if(memberB[i].className=="open"){
memberB[i].className="";
}
else{
memberB[i].className="open";
}
}
What did I do wrong, I try to alert to see if I get the element that i clicked, all i get is 'undefined'.

you can use forEach to loop the NodeList which use querySelectorAll method, and use addEventListener to watch click event happen on all the elements you selected. Finally, use Element.classList.toggle method to toggle the class open or close
there is an example of toggle its background color after click
const members = document.querySelectorAll('.member');
members.forEach(member => {
member.addEventListener('click', e => {
e.target.classList.toggle('hight-light');
});
});
.member {
background-color: gray;
}
.hight-light {
background-color: green;
}
<div class="container">
<div class="member">1</div>
<div class="member hight-light">2</div>
<div class="member">3</div>
<div class="member">4</div>
</div>

I have a code snippet I like to keep around to do these kind of things in a single event listener
window.addEvent = (event_type, target, callback) => {
document.addEventListener(event_type, function (event) {
// If the event doesn't have a target
// Or the target doesn't look like a DOM element (no matches method
// Bail from the listener
if (event.target && typeof (event.target.matches) === 'function') {
if (!event.target.matches(target)) {
// If the element triggering the event is contained in the selector
// Copy the event and trigger it on the right target (keep original in case)
if (event.target.closest(target)) {
const new_event = new CustomEvent(event.type, event);
new_event.data = { originalTarget: event.target };
event.target.closest(target).dispatchEvent(new_event);
}
} else {
callback(event);
}
}
});
};
then in your case I'd do this
window.addEvent('click', '#memberA,#memberAA,#memberAAA', (event) => {
event.target.classList.toggle('open');
});

The script runs befor the DOM elements load.
You can put the script as a function inside an $(document).ready such that it runs after all the elements have been loaded.
$(document).ready(
function () {
const memberB = document.querySelectorAll('#memberA, #memberAA, #memberAAA ');
for (let i = 0; i < memberB.length; i++) {
memberB[i].onclick = function () {
//alert(memberB[i])
if (memberB[i].className === "open") {
memberB[i].className = "";
} else {
memberB[i].className = "open";
}
alert(memberB[i].className)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="memberA">A</button>
<button id="memberAA">AA</button>
<button id="memberAAA">AAA</button>
Let me know if this works!

how to apply same function to multiple divs

on this page (http://jodiaries.com/test/) I need to make a popup appear when I click on the red boxes.
So far it works, I added the onclick = "div1" attribute to the red box (on the others = "div2", etc) and use this:
function showhide(divElement) {
var e = document.getElementById(divElement);
if(e.style.display == 'flex'){
e.style.display = 'none';
} else {
e.style.display = 'flex';
}
}
for now the popup closes when I click again on the number, I would like to make it close by clicking anywhere outside that div/popup. I created another script (probably wrong) with this:
window.onload = function(){
var divToHide = document.getElementById('div1');
document.onclick = function(e){
if(e.target.id !== 'div_block-286-119'){
divToHide.style.display = 'none';
}
};
};
but it works only on the first red box, not on the others (because I target only div_block-286-119).
How can I get it to work with all popups (i will add more as soon as everything works)?
thanks in advance!

It's a bad idea to work with ids in your case, also in general. Instead of onclick="yourFunction()" use event listener. I didn't test the code down below, but it should work.
document.querySelectorAll(".crono-day-red").forEach(red => {
red.addEventListener("click", () => showhide(red));
})
const showhide = red => {
// I prefer to control styles by toggling classes.
// IMO, it's easier, especially for multiple styles.
red.closest(".ct-div-block").classList.toggle("popup-visible");
}
const closePopups = () => {
window.addEventListener("click", () => {
let clickedInside = event.target.classList.contains(".popup-visible")
|| event.target.closest(".popup-visible)"
if (clickedInside) {
return;
}
document.querySelectorAll(".popup-visible").forEach(x => x.classList.remove("popup-visible"));
})
}
window.onload = closePopups();
.ct-div-block .nove-gen-click { display: none }
.ct-div-block.popup-visible .nove-gen-click { display: flex }
All you need to do is to toggle "popup-visible" class by your functions.
I also noticed that you define popup styles in #div1 and #div2... Very bad practice.
EDIT AFTER COMMENT
To close currently open red box when you click the new one:
const showhide = red => {
red.closest(".ct-section-inner-wrap")
.querySelectorAll(".popup-visible")
.forEach(x => x.classList.remove("popup-visible"));
red.closest(".ct-div-block").classList.add("popup-visible");
}

How to fire "onmouseenter" only if cursor came from outside of that element

I have 2 images, one and two
On hover of one, the two is displayed, and one is hidden
And then, if I clicked two, it should hide and show the one again
So far all okay
BUT, problem is, mouse is already on the one image so onmouseenter triggers again. I want it to trigger only if mouse came from outside of image without jQuery
Just like the Chat icon here on bottom-right
document.getElementById("one").onmouseenter = function onmouseoverRobot() {
document.querySelector("#two").style = 'display:inline-block !important'
document.querySelector("#one").style = 'display:none !important'
}
document.getElementById("two").onclick = function X_CHAT_01() {
document.querySelector("#two").style = 'display:none !important'
document.querySelector("#one").style = 'display:inline-block !important'
}
<img id='one' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoMUKwCL1uINRV035jkpfQzAbiObKqraXA6369mZBe0To0UuWP'>
<img id='two' style='display:none' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMYIpY4d8KlTzhAd38KZW8DIadeEV59WtLlxeIH3PS4uPXL0RP'>

In order to avoid the mouseenter event firing when you show the image try removing the listener and then adding it back after a mouseleave event.
img#one:mouseenter - Remove mouseenter listener from img#one. Hide img#one and show img#two.
img#two:click - Show img#one and hide img#two.
img#one:mouseleave - Add mouseenter listener to img#one.
You can also use one-time listeners for a simpler flow.
const onMouseEnter = function() {
hide(one)
show(two)
two.addEventListener("click", onClick, { once: true })
}
const onClick = function() {
one.addEventListener("mouseleave", onMouseLeave, { once: true })
hide(two)
show(one)
}
const onMouseLeave = function() {
one.addEventListener("mouseenter", onMouseEnter, { once: true })
}
one.addEventListener("mouseenter", onMouseEnter, { once: true })

The simplest solution that doesn't require event listeners mangling is to add a boolean indicator that tells if the chat has been enabled or not.
var chatEnabled = false;
var one = document.getElementById('one');
var two = document.getElementById('two');
one.onmouseenter = function onmouseoverRobot() {
if (chatEnabled) {
return;
}
two.style = 'display:inline-block !important';
one.style = 'display:none !important';
};
one.onmouseout = function onmouseoutRobot() {
chatEnabled = false;
};
two.onclick = function X_CHAT_01() {
chatEnabled = true;
two.style = 'display:none !important';
one.style = 'display:inline-block !important';
};
Please, take a look at the demo.

How to unbind within a bind event

I am developing a feature in a chrome extension that allows the user to hover over and detect any element on the page. A select button on the top right of the page activates the feature. Whenever an element is clicked on, an input box near the button gets filled with that element's innerHTML. After the click, the selection should stop and clicking will no longer be recognized by the feature. Everything works fine but I am unable to unbind the clicking event. Is there anything wrong with my code? Please let me know
content.js
window.onload = () => {
var highlight = function (event){
if(!$(event.target).is("#home_container *")){
event.target.style.backgroundColor = "rgba(121, 204, 255, 0.4)";
}
}
var remove = function (event){
if(!$(event.target).is("#home_container *")){
event.target.style.backgroundColor = "";
}
}
var disableLinks = function (event){
event.preventDefault();
}
var highlightProcess = function(event) {
$('a').bind("click", disableLinks);
$(document).bind("mouseover", highlight);
$(document).bind("mouseout", remove);
$(document).bind("click", (elem) => {
if(!$(elem.target).is("#home_container *")){
$("#input_box").val(elem.target.innerHTML);
remove(elem);
$(document).unbind("mouseover", highlight); //<-- works
$(document).unbind("mouseout", remove); //<-- works
$('a').unbind("click", disableLinks); //<-- works
$(this).unbind("click"); //<-- this does not work
}
});
}
document.getElementById('st_select_element_button').addEventListener("click", highlightProcess);
}

You can change the highlightProcess to arrow function and then 'this' will refer to the document :
var highlightProcess = (event) => {...}

Solved
changed
$(this).unbind("click");
to
$(document).unbind("click");

Detect click outside element (vanilla JavaScript)

I have searched for a good solution everywhere, yet I can't find one which does not use jQuery.
Is there a cross-browser, normal way (without weird hacks or easy to break code), to detect a click outside of an element (which may or may not have children)?

Add an event listener to document and use Node.contains() to find whether the target of the event (which is the inner-most clicked element) is inside your specified element. It works even in IE5
const specifiedElement = document.getElementById('a')
// I'm using "click" but it works with any event
document.addEventListener('click', event => {
const isClickInside = specifiedElement.contains(event.target)
if (!isClickInside) {
// The click was OUTSIDE the specifiedElement, do something
}
})
var specifiedElement = document.getElementById('a');
//I'm using "click" but it works with any event
document.addEventListener('click', function(event) {
var isClickInside = specifiedElement.contains(event.target);
if (isClickInside) {
alert('You clicked inside A')
} else {
alert('You clicked outside A')
}
});
div {
margin: auto;
padding: 1em;
max-width: 6em;
background: rgba(0, 0, 0, .2);
text-align: center;
}
Is the click inside A or outside?
<div id="a">A
<div id="b">B
<div id="c">C</div>
</div>
</div>

You need to handle the click event on document level. In the event object, you have a target property, the inner-most DOM element that was clicked. With this you check itself and walk up its parents until the document element, if one of them is your watched element.
See the example on jsFiddle
document.addEventListener("click", function (e) {
var level = 0;
for (var element = e.target; element; element = element.parentNode) {
if (element.id === 'x') {
document.getElementById("out").innerHTML = (level ? "inner " : "") + "x clicked";
return;
}
level++;
}
document.getElementById("out").innerHTML = "not x clicked";
});
As always, this isn't cross-bad-browser compatible because of addEventListener/attachEvent, but it works like this.
A child is clicked, when not event.target, but one of it's parents is the watched element (i'm simply counting level for this). You may also have a boolean var, if the element is found or not, to not return the handler from inside the for clause. My example is limiting to that the handler only finishes, when nothing matches.
Adding cross-browser compatability, I'm usually doing it like this:
var addEvent = function (element, eventName, fn, useCapture) {
if (element.addEventListener) {
element.addEventListener(eventName, fn, useCapture);
}
else if (element.attachEvent) {
element.attachEvent(eventName, function (e) {
fn.apply(element, arguments);
}, useCapture);
}
};
This is cross-browser compatible code for attaching an event listener/handler, inclusive rewriting this in IE, to be the element, as like jQuery does for its event handlers. There are plenty of arguments to have some bits of jQuery in mind ;)

How about this:
jsBin demo
document.onclick = function(event){
var hasParent = false;
for(var node = event.target; node != document.body; node = node.parentNode)
{
if(node.id == 'div1'){
hasParent = true;
break;
}
}
if(hasParent)
alert('inside');
else
alert('outside');
}

you can use composePath() to check if the click happened outside or inside of a target div that may or may not have children:
const targetDiv = document.querySelector('#targetDiv')
document.addEventListener('click', (e) => {
const isClickedInsideDiv = e.composedPath().includes(targetDiv)
if (isClickedInsideDiv) {
console.log('clicked inside of div')
} else {
console.log('clicked outside of div')
}
})

I did a lot of research on it to find a better method. JavaScript method .contains go recursively in DOM to check whether it contains target or not. I used it in one of react project but when react DOM changes on set state, .contains method does not work. SO i came up with this solution
//Basic Html snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="mydiv">
<h2>
click outside this div to test
</h2>
Check click outside
</div>
</body>
</html>
//Implementation in Vanilla javaScript
const node = document.getElementById('mydiv')
//minor css to make div more obvious
node.style.width = '300px'
node.style.height = '100px'
node.style.background = 'red'
let isCursorInside = false
//Attach mouseover event listener and update in variable
node.addEventListener('mouseover', function() {
isCursorInside = true
console.log('cursor inside')
})
/Attach mouseout event listener and update in variable
node.addEventListener('mouseout', function() {
isCursorInside = false
console.log('cursor outside')
})
document.addEventListener('click', function() {
//And if isCursorInside = false it means cursor is outside
if(!isCursorInside) {
alert('Outside div click detected')
}
})
WORKING DEMO jsfiddle

using the js Element.closest() method:
let popup = document.querySelector('.parent-element')
popup.addEventListener('click', (e) => {
if (!e.target.closest('.child-element')) {
// clicked outside
}
});

To hide element by click outside of it I usually apply such simple code:
var bodyTag = document.getElementsByTagName('body');
var element = document.getElementById('element');
function clickedOrNot(e) {
if (e.target !== element) {
// action in the case of click outside
bodyTag[0].removeEventListener('click', clickedOrNot, true);
}
}
bodyTag[0].addEventListener('click', clickedOrNot, true);

Another very simple and quick approach to this problem is to map the array of path into the event object returned by the listener. If the id or class name of your element matches one of those in the array, the click is inside your element.
(This solution can be useful if you don't want to get the element directly (e.g: document.getElementById('...'), for example in a reactjs/nextjs app, in ssr..).
Here is an example:
document.addEventListener('click', e => {
let clickedOutside = true;
e.path.forEach(item => {
if (!clickedOutside)
return;
if (item.className === 'your-element-class')
clickedOutside = false;
});
if (clickedOutside)
// Make an action if it's clicked outside..
});
I hope this answer will help you !
(Let me know if my solution is not a good solution or if you see something to improve.)