We Keep Coding

How to select only headers within a class

I am trying to hide the div if you click only on the header. But my filter does not seem to work. I get the intended function wherever I click on the div. I want to restrict this to only when you click on the header.
<div class="post" onclick="updatenext()">
<h2>Item3</h2>
</div>
<div class="post" onclick="updatenext()">
<h2>Item4</h2>
</div>
<script>
var index=0;
$(".post").hide();
$(".post").eq(0).show();
// Tried this too: $(".post").filter(":header")....
$(":header.post").on("click",
function () {
index=$(this).index();
//console.log($(this).index());
$(this).hide();
$(".post").eq(index).show();
}
);
</script>
I expect the click to work only when clicking on the header element within each div.

Try using only jQuery for the event listener, like this:
<div class="post">
<h2 onclick="updatenext()">Item3</h2>
</div>
<div class="post">
<h2 onclick="updatenext()">Item4</h2>
</div>
<script>
var index = 0;
$(".post").hide();
$(".post").eq(0).show();
$("h2").on("click", function () {
index = $(this).parent().index();
$(this).parent().hide();
$(".post").eq(index).show();
});
</script>

Javascript - Retrieving values of a div when a button inside that div is clicked

I'm writing the code to edit a database table.
I have the following HTML:
<div id="1">
<div contenteditable>aaa</div>
<div contenteditable>bbb</div>
<div contenteditable>ccc</div>
<button onClick="a('save')">SAVE</button>
<button onClick="a('delete')">DELETE</button>
</div>
<div id="2">
<div contenteditable>ddd</div>
<div contenteditable>eee</div>
<div contenteditable>fff</div>
<button onClick="a('save')">SAVE</button>
<button onClick="a('delete')">DELETE</button>
</div>
<div id="3">
<div contenteditable>ggg</div>
<div contenteditable>hhh</div>
<div contenteditable>iii</div>
<button onClick="a('save')">SAVE</button>
<button onClick="a('delete')">DELETE</button>
</div>
And so on.
Using the following function, I can get the clicked button:
function a(value) {
console.log(value);
}
When a button (SAVE or DELETE) is clicked, I need to retrieve:
the id of the "parent" div;
the content of each of the three contenteditable divs inside the same "parent" div.
Is it possible using pure Javascript?
Any suggestion will be very appreciated.
Thanks in advance.

What I would do is implement click listeners in JS, that way I can query elements easily.
Here is the example:
// Query all div.div-editable elements
document.querySelectorAll('div.div-editable')
.forEach((div) => {
// The id of the parent
const divId = div.id;
// Each of content editable divs inside the parent div
const editables = div.querySelectorAll('div[contenteditable]');
// The buttons Save and Delete
const saveBtn = div.querySelector('button.button-save');
const deleteBtn = div.querySelector('button.button-delete');
// Add click listeners to buttons
saveBtn.addEventListener('click', function() {
console.log('Saved: ' + divId);
const contentOfEditableDivs = Array.from(editables).map((div) => div.innerText);
console.log('Values of divs:', contentOfEditableDivs);
});
deleteBtn.addEventListener('click', function() {
console.log('Deleted: ' + divId);
const contentOfEditableDivs = Array.from(editables).map((div) => div.innerText);
console.log('Values of divs:', contentOfEditableDivs);
});
});
<div id="1" class="div-editable">
<div contenteditable>aaa</div>
<div contenteditable>bbb</div>
<div contenteditable>ccc</div>
<button class="button-save">SAVE</button>
<button class="button-delete">DELETE</button>
</div>
<div id="2" class="div-editable">
<div contenteditable>ddd</div>
<div contenteditable>eee</div>
<div contenteditable>fff</div>
<button class="button-save">SAVE</button>
<button class="button-delete">DELETE</button>
</div>
<div id="3" class="div-editable">
<div contenteditable>ggg</div>
<div contenteditable>hhh</div>
<div contenteditable>iii</div>
<button class="button-save">SAVE</button>
<button class="button-delete">DELETE</button>
</div>
EDIT 1: Added code snippet
EDIT 2: Simplified explanation

You can send this keyword in the argument of click's event handler and then access the parent div's id.
So your HTML would look something like:
// rest of the code here
<button onClick="a(this, 'save')">SAVE</button>
<button onClick="a(this, 'delete')">DELETE</button>
// rest of the code here
And your JS code would change to:
function a(elem, value) {
console.log(elem.parentNode.id);
}
More details on the following link:
how i get parent id by onclick Child in js

Add external link to an <a> element inside a Click Event Listener Div

I'm having trouble adding a link to a button inside a card. the card is wrapped in a div element which when clicked automatically expands and closes.
Is there anyway to remove this functionality just when clicking on the details button? So it acts as a normal link?
Here is the code:
https://codepen.io/candroo/pen/wKEwRL
Card HTML:
<div class="card">
<div class="card__image-holder">
<img
class="card__image"
src="https://source.unsplash.com/300x225/?wave"
alt="wave"
/>
</div>
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch
devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
Read more
</div>
</div>
</div>
</div>
JS:
$(document).ready(function () {
var zindex = 10;
$("div.card").click(function (e) {
e.preventDefault();
var isShowing = false;
if ($(this).hasClass("show")) {
isShowing = true;
}
if ($("div.cards").hasClass("showing")) {
// a card is already in view
$("div.card.show").removeClass("show");
if (isShowing) {
// this card was showing - reset the grid
$("div.cards").removeClass("showing");
} else {
// this card isn't showing - get in with it
$(this).css({ zIndex: zindex }).addClass("show");
}
zindex++;
} else {
// no cards in view
$("div.cards").addClass("showing");
$(this).css({ zIndex: zindex }).addClass("show");
zindex++;
}
});
});

You can check the target of the event and see if it is an <a> using is()
Something like:
$("div.card").click(function (e) {
// only run when not an `<a>`
if(!$(e.target).is('a')){
e.preventDefault();
//the rest of your code
....
}
});

I don't know Jquery but with javascript you can do this inside your code:
const links = document.querySelectorAll('.btn');
links.forEach(link => link.addEventListener('click', (e)=>e.stopPropagation()))

Button Onclick only working on first element

When clicking button on elements, overlay box only works with first one, not the rest
I tried already to add 2 classes but not working as I read that that might be the issue, but I am not able to make it work properly.
<div class="container">
<input type="button" value="Contactar ahora" id="Overly" class="overly"
/>
</div>
<div id="ogrooModel" class="modalbox ogroobox" >
<div class="dialog">
<button title="Close" onClick="overlay()" class="closebutton" id="close">close</button>
<div style="min-height: 150px;">
</div>
</div>
</div>
<script>
//only javascript
document.getElementById("Overly").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display = 'block';
}) ;
document.getElementById("close").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display= 'none';
});
</script>
What exactly to change in that code so the rest of elements display the box after clicking on button?

You don't need onClick="overlay()" for your close button, as you are already binding it with a click event listener in your script.

delegate jQuery toggle event to the rest of the document

I have a dropdown menu activated on click.
I use toggle to activate it when you click on the .hello_panel
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello </div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
jQuery
$('.hello_panel').bind('click', function(){
$('.menu_popup').toggle();
})
if I click it it works fine, it does the show and hide effect when the .hello_panel
is clicked.
what I want is it to be shown if the .hello_panel is clicked and hidden back if when clicking anything else on the page except the .menu_popup

You can hide it whenever you click on the document
JavaScript
$(document).click(function () {
$('.menu_popup:visible').hide();
});
$('.hello_panel').bind('click', function (e) {
$('.menu_popup').toggle();
e.stopPropagation();
});
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello</div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
<div style="display:none" class="menu_popup">menu_popup</div>
Demo
http://jsfiddle.net/6bo1rjrt/16/
Another way if you don't want to stopPropagation is passing a call back function that registers a once time click listener to that document to hide the menu
$('.hello_panel').bind('click', function () {
$('.menu_popup').show(function () {
$(document).one('click', function () {
$('.menu_popup:visible').hide();
});
});
});
Demo
http://jsfiddle.net/6bo1rjrt/17/