Develop Reference

Problems with document.addEventListener vs element.addEventListener

I was working on some code I wrote and I had this problem where an eventListener I added to a dynamically created element, but it does not "fire" aka work.
var eleButton = document.createElement("button");
eleButton.innerText="Post";
eleButton.type="submit";
...
eleButtonContainer.appendChild(eleButton);
And the eventlistener was a basic "click"
eleButton.addEventListener("click", function() {
console.log("Hello World");
});
That did not work, so i searched around and could not find any answers. I finally found a work around of using document and checking whether or not that element was check or not. So my resulting code became this:
var eleButton = document.createElement("button");
eleButton.innerText="Post";
eleButton.type="submit";
eleButton.id = "usrResponseSubmit";
console.log(eleButton);
document.body.addEventListener('click',function(){
if(event.target.id == "usrResponseSubmit"){
console.log("ok now it works");
}
});
This works fine, but it still makes me question about the code atop. I willing to take the "if it werks it works" route, but I would also still like to use the eleButton.addEventListener route because that was what I always used.
So my two questions are:
is using document.addEventListener bad?
why does eleButton.addEventListner not work?
Before you say, but it works on my end, my code is kinda crap and long. Essentially, I have this eleButton nested in a container that is nested in a container ... (x~10-20). I don't think this is necessarily the problem. But I also have some other eventListeners that "may" overlay with eleButton. I'm not too sure that's the case as i've been trying and testing everything I can.
I have also pulled the eleButton and appended it to an existing object and the event did fire. Can someone give me a run down of when events do not fire?

Nothing is wrong with your code, maybe you just misspelled something. here i made a codepen example you can check.
html:
<div id="btnCon"></div>
...
JS:
const eleButtonContainer = document.querySelector('#btnCon')
var eleButton = document.createElement("button");
eleButton.innerText="Post";
eleButton.type="submit";
eleButtonContainer.appendChild(eleButton);
eleButton.addEventListener("click", function() {
console.log("Hello World");
});
the example on codepen

How To Make My Text Appear/Disappear [duplicate]

So I'm a student and just very lost in my coding class. My teacher gave us this code to make it so when I click on a header, it expands into a paragraph.
He then wants us to make it so when you click on the header, the paragraph disappears again. I just cannot figure out how to do this second part, making it disappear.
This is what the 'Show Article' code looks like.
function showArticle(id) {
document.getElementById(id).style.display="block";
Can anyone help me out please? I feel like it's so simple I'm just so bad at this. If you could tell me where to place it in my code that would be much appreciated as well.

If you are using js and not jquery
var visible = false;
function showArticle(id) {
if (visible === false) {
document.getElementById(id).style.display="block";
visible = true;
}
else {
document.getElementById(id).style.display="none";
visible = false;
}
}

function toggleArticle(id){
($('#'+id).is(':visible') ? $('#'+id).hide() : $('#'+id).show() )}

Just use jQuery's toggle.
$('#'+headerId).on('click', function(){
$('#'+id).toggle();
});

Stop jquery looping function with second click and start from beginning

i have a click function, that starts another looping function.
i've looked for many exampels and instructions but don't get the function stopped with a second click on the button.
on jsfiddle, i've build, how it works actually.
my idea is to put a stop action to the clickfunction, but it doesn't seem to work:
function marsch() {
$('li').hide();
<!-- fadeInSequence().stop(); -->
fadeInSequence();
}
may you please help me
https://jsfiddle.net/t3exdrud/
by the way, it's my very first coding and it would be helpful, if someone gives also advise, if this code causes problems or isn't up to date

You need an outside variable that control if the function is working or not
var fadeSequenceON = false;
function marsch() {
if(!fadeSequenceON){
fadeInSequence();
fadeSequenceON = true;
} else {
$('li').hide();
fadeSequenceON = false;
}
}

<a onclick> display an element, second click close the element. How to do it?

I have a little problem. When I click on menubutton "x" I trigger an onclick event wich opens/displays an element. So far, so goed... But now I want to click the same menubutton "x" to close that same element. And that is where it goes wrong. I have no idea how to do it.
Here is my html code with the JS.
diensten
*submenuAan (submenu aan) means turn submenu on.
function submenuAan()
{
document.getElementById('menu-vg').style.display = "block";
document.getElementById('menu-vg').style.zIndex = "999";
}
So I thought, when I add an other function behind "return false" for closing, it will work. But it did not.
I hope someone can and will help me. Thanks!
Ps.
before someone tells me there already is a simular question like this... I did search, but did not find. If there is, I would like the link to it.

You can check with a simple if statement which action should be taken:
diensten
function toggleSubmenu(){
if(document.getElementById('menu-vg').style.display != "block"){
document.getElementById('menu-vg').style.display = "block";
document.getElementById('menu-vg').style.zIndex = "999";
}
else{
document.getElementById('menu-vg').style.display = "none";
document.getElementById('menu-vg').style.zIndex = "auto";
}
}

Minifying the Code for #Xufox's Answer as
function toggleSubmenu(){"block"!=document.getElementById("menu-vg").style.display?(document.getElementById("menu-vg").style.display="block",document.getElementById("menu-vg").style.zIndex="999"):(document.getElementById("menu-vg").style.display="none",document.getElementById("menu-vg").style.zIndex="auto")}

jQuery event delegation with non-trivial HTML markup?

I have two DIVs, first one has a link in it that contains the id of the second DIV in its HREF attribute (complete setup on jsbin).
I want to animate the second DIV when user clicks on the first - anywhere on the first. I also want to use event delegation because I'll have many such "DIV couples" on a page (and I'm using a JS snippet from this SO answer).
If user clicks on the DIV itself, it will work - just check firebug console output. The problem is, if user clicks on one of the SPANs or the link itself, it doesn't work anymore.
How can I generalize the click handler to manage clicks on anything inside my DIV?
Here's the JS:
$('#a').click(function(e) {
var n = $(e.target)[0];
console.log(n);
if ( n && (n.nodeName.toUpperCase() == 'DIV') ) {
var id = $(n).find('a').attr('hash');
console.log(id);
$(id).slideToggle();
}
return false;
});

It took me so long to write up the question that I decided to post it anyway, perhaps someone suggests a better way.
Here's the solution I found (jsbin sandbox):
$('#a').click(function(e) {
var n = $(e.target)[0];
var name = n.nodeName.toLowerCase() + '.' + n.className.toLowerCase();
if (n && (name === "div.clicker" || $(n).parents("div.clicker").length )) {
var id = $(n).find('a').attr('hash');
if(!id) {
id = $(n).parents("div.clicker").find('a').attr('hash');
}
console.log(id);
}
return false;
});

Here is my solution. Not sure if that's exactly what you wanted, but it works for me.
$(document).ready(function() {
$('#a').click(function() {
var a = $("a", this);
$(a[0].hash).slideToggle();
});
});
Edit: Tested in both IE7 and Fx3
Edit: In that case...
$(function() {
$("a.tab").click(function() {
$($(this).attr("hash")).slideToggle();
return false;
});
});
Something like that might work (putting the tab class on anything that has a div "attached" to it). However, I'm not sure unless I actually see an example of it. Although if you want it to work when clicking on the span...you would attach the class to the span, and instead do:
$(function() {
$("span.tab").click(function() {
var a = $("a",this);
$(a.attr("hash")).slideToggle();
});
});
Not sure if you want an open div to close if another one is opened. If this doesn't solve your problem, it would help if you would put up an example on jsbin...