Develop Reference

Trying to loop through click event and make the div´s with it´s texts visible. Does somebody what the mistake is?

Here is the html container:
<div class="arrow-1">
<div class="text-event">
<p class="text-style-11">Text 1
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-2">
<div class="text-event">
<p class="text-style-11">Text 2
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-3">
<div class="text-event">
<p class="text-style-11">Text 3
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-4">
<div class="text-event">
<p class="text-style-11"> Text 4
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-5">
<div class="text-event">
<p class="text-style-11"> Text 5
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
</div>
The paragraphs should be "visible" when text-event class clicked. Text style class is "hidden" by default. I did that already with other div boxes and it worked. Is there a 'p' declaration missing in the loop function? There is not even a console feedback when I pass the textEvent variable to the console.
const textEvent = document.querySelectorAll('.text-event');
for (var j = 0; j < textEvent.length; j++) (function (j) {
textEvent[j].addEventListener('click', onclick);
textEvent[j].onclick = function (ctrls) {
ctrls.forEach(ctrl => {
/* ctrl.getElementsByClassName('p')[0].innerHTML; */
ctrl.document.getElementsByClassName('text-style-11').style.visibility = "visible";
})
}
})(j);

I could not understand very well your code but this is how I would do it.
First get all the element with class "text-event"
loop over that array and add an event listener to each of them.
When you click in one of them select the element with the class of text-style-11
To something to that element.
const textContainers = document.querySelectorAll(".text-event");
textContainers.forEach((element) => {
element.addEventListener("click", () => {
const textElement = element.querySelector(".text-style-11");
textElement.style.visibility = "hidden";
});
});
Instead of adding styles directly, I recommend you to create a class and use classList toggle to add and remove that class.
textContainers.forEach((element) => {
element.addEventListener("click", () => {
const textElement = element.querySelector(".text-style-11");
textElement.classList.toggle("show");
});
});

I have tested this code it should work fine:
const textEvent = document.querySelectorAll('.text-event');
for (var j = 0; j < textEvent.length; j++) {
textEvent[j].addEventListener('click', (el) => {
const clickedElement = el.currentTarget;
const innerParagraph = clickedElement.querySelector('.text-style-11');
innerParagraph.style.visibility = 'visible';
});
}

You've already got a valid answer.. by the way here's the live snippet using the proper strategy to add an event listener to all your .text-event elements that will hide the inner paragraph embedded in the clicked box:
document.querySelectorAll('.text-event').forEach((el) => {
el.addEventListener('click', (event) => {
const clickedElement = event.currentTarget;
const innerParagraph = clickedElement.querySelector('.text-style-11');
innerParagraph.style.visibility = 'visible';
});
});
.text-event {
border: dotted gray 3px;
margin-bottom: 2px;
cursor: pointer;
}
.text-style-11{
visibility: hidden;
}
<div class="arrow-1">
<div class="text-event">
<p class="text-style-11">Alle Personen, die nicht sozialversicherungspflichtig beschäftigt sind (Beamte, Selbstständige, etc.)
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-2">
<div class="text-event">
<p class="text-style-11">Einmalige Wartezeit 1 Monate
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-3">
<div class="text-event">
<p class="text-style-11">Keine Karenzzeit
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-4">
<div class="text-event">
<p class="text-style-11">Versichert sind nur Erstdiagnosen während der Versicherungslaufzeit (Herzinfarkt, Schlaganfall, Krebs, Blindheit oder Taubheit)
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-5">
<div class="text-event">
<p class="text-style-11">Übernahme des noch ausstehenden Restsaldos von bis zu 135.000 €
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>

Filter divs by class

I am trying to create a function that returns an additional display of none when you click on a button. It basically filters divs with class names when you click a button. I used a while/do loop to go through all the elements by class name.
In the browser console log it is telling me
"Cannot read property 'style' of undefined".
Does anybody knows what might be the problem?
<div class="container">
<h1 id="title">World's Top suppply chains</h1>
<div class="options">
<button id="allbtn">All</button>
<button>Drinks</button>
<button>Clothing</button>
<button>Cars</button>
<button id="fast-food-btn">Fast Food</button>
</div>
<div class="stores">
<div class="store">
<img src="images/adidas.png">
<h3>Adidas</h3>
<p class="industry">Clothing</p>
</div>
<div class="store">
<img src="images/corona.png">
<h3>Corona</h3>
<p class="industry">Drinks</p>
</div>
<div class="store">
<img src="images/nike.jpg">
<h3>Nike</h3>
<p class="industry">Clothing</p>
</div>
<div class="store">
<img src="images/lambo.png">
<h3>Lamborghini</h3>
<p class="industry">Cars</p>
</div>
<div class="store">
<img src="images/smirnoff.png">
<h3>Smirnoff</h3>
<p class="industry">Drinks</p>
</div>
<div class="store">
<img src="images/pepsi.jpg">
<h3>Pepsi</h3>
<p class="industry">Drinks</p>
</div>
<div class="store">
<img src="images/gucci.png">
<h3>Gucci</h3>
<p class="industry">Clothing</p>
</div>
<div class="store">
<img src="images/heineken.jpg">
<h3>Heineken</h3>
<p class="industry">Drinks</p>
</div>
<div class="store">
<img src="images/lacoste.png">
<h3>Lacoste</h3>
<p class="industry">Clothing</p>
</div>
<div class="store">
<img src="images/ferrari.png">
<h3>Ferrari</h3>
<p class="industry">Cars</p>
</div>
<div class="store">
<img src="images/pizzahut.png">
<h3>Pizza Hut</h3>
<p class="industry">Fast Food</p>
</div>
<div class="store">
<img src="images/cocacola.png">
<h3>Coca Cola</h3>
<p class="industry">Drinks</p>
</div>
<div class="store">
<img src="images/mc.png">
<h3>Mc Donalds</h3>
<p class="industry">Fast Food</p>
</div>
</div>
</div>
<script>
const industry = document.getElementsByClassName(".industry");
const fastFood = document.getElementById("fast-food-btn");
allbtn.addEventListener("click", filter);
function filter(){
const card = industry.parentElement;
do{
card.style.display = "none";
}
while(industry.innerHTML === "Fast Food");
}
</script>

First issue is that you don't need the dot in front of the class when using getElementsByClassName.
Secondly getElementsByClassName returns a HTMLCollection which does not have a property called parent.
Which results in something like this:
function filter() {
const industries = document.getElementsByClassName("industry");
for (let industry of industries) {
industry.style.display = "none";
}
}
Furthermore, it looks like the variable fastFood is not used and the variable allbtn is undefined. I assume it shoul be something like this:
const allbtn = document.getElementById("allbtn");
Putting it together, this should solve your problem:
<script>
function filter() {
const industries = document.getElementsByClassName("industry");
for (let industry of industries) {
industry.style.display = "none";
}
}
const allbtn = document.getElementById("allbtn");
allbtn.addEventListener("click", filter);
</script>

How to render an HTMLCollection item?

I have the following html:
<div class="avatars">
<div class="avatar">
<div>
<svg data-jdenticon-value="Oamar Kanji"></svg>
</div>
<h3 class="name">Oamar Kanji</h3>
</div>
<div class="avatar">
<div>
<svg data-jdenticon-value="Oamar Kanji"></svg>
</div>
<h3 class="name">Jane Doe</h3>
</div>
</div>
I am getting a specific element like so and trying to display it inside another element:
<div id="display-here"/>
<script>
let someAvatar = document.getElementsByClassName("avatar").item(0)
document.getElementById('display-here').innerHTML = someAvatar
</script>
This does not work..

You need to use cloneNode
More info here: link
let someAvatar = document.getElementsByClassName("avatar").item(0)
console.log(someAvatar);
var clonedElem = someAvatar.cloneNode(true);
document.getElementById("display-here").appendChild(clonedElem);
<div class="avatars">
<div class="avatar">
<div>
<svg data-jdenticon-value="Oamar Kanji"></svg>
</div>
<h3 class="name">Oamar Kanji</h3>
</div>
<div class="avatar">
<div>
<svg data-jdenticon-value="Oamar Kanji"></svg>
</div>
<h3 class="name">Jane Doe</h3>
</div>
</div>
<div id="display-here">
</div>

Use the following line inside script:
let someAvatar = document.getElementsByClassName("avatar").item(0).innerHTML;
instead of
let someAvatar = document.getElementsByClassName("avatar").item(0)
Now someAvatar will have the HTML content inside of the div. Previously your were having the whole div HTML node.

Open div panel inbetween two tweets?

I'm working on a UI that has Twitter feeds. I want to be able to open a panel in the middle of two tweets, pushing the tweet below downwards. This functionality can be seen in tweet clients like TweetBot. As each new tweet in the stream popped up it would push each one below it down as well. Tool bar would be the same for all tweets.
Here is what I have for the JS:
$(document).ready(function() {
hidden = true;
$("div#tweetcontainer").click(function() {
if (hidden == false) {
$("div#toolbar").slideUp('fast');
hidden = true;
} else {
$("div#toolbar").slideDown('fast');
hidden = false;
}
});
});​
Here is the markup of the HTML:
<div id="wrapper">
<!------------- Indivdual Tweet -------------------------->
<div id="tweetcontainer">
<div id="avatarcontainer">
<div id="avatar"></div>
</div>
<div id="content">
<div id="tweetheader">
<div id="name">
<h1>John Drake</h1>
</div>
<div id="tweethandle">
<h2>#Drakejon</h2>
</div>
<div id="tweettime">10m</div>
</div>
<div>
<p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform http://tcrn.ch/11m3BrO by #sohear </p>
</div>
</div>
</div>
<!------------- Indivdual Tweet 2 -------------------------->
<div id="tweetcontainer">
<div id="avatarcontainer">
<div id="avatar"></div>
</div>
<div id="content">
<div id="tweetheader">
<div id="name">
<h1>John Drake</h1>
</div>
<div id="tweethandle">
<h2>#Drakejon</h2>
</div>
<div id="tweettime">10m</div>
</div>
<div>
<p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform http://tcrn.ch/11m3BrO by #sohear </p>
</div>
</div>
</div>
<!-------------Tool Bar -------------------------------->
<div id="toolbar">
<div class="toolset">reply</div>
<div class="toolset">Retweet</div>
<div class="toolset">Favorite</div>
<div class="toolset">Track</div>
<div class="toolset">Details</div>
</div>
</div>

Do
$toolbar = $(.toolbar).clone();
$(this).after($toolbar);
I guess you will have to do something like
$(.toolbar).addClass("hidden");
before you appending it to the div, and then do
if ($(.toolbar)).hasClass("hidden"){
...pulldown...
}
or something to keep it disappeared and make it pullDown after appending.

Generate link based on data attributes

I am trying to write a little jQuery script that checks a set of div's to see if they have a data-name attribute. For the ones that have a data-name, it will create a link. The href of that link should be the name of the data-value plus contain the file extension (eg. .txt).
Everything seems to work OK except when I try to add the data value onto the link. The ultimate result of this script is to output something like this for each of those div's:
<p class="data-link">Edit
Below is my script. I have identified that area that I am having issue with.
var dataNameWrappers = $("div#desktopSidebar div[data-name]");
dataNameWrappers.each(function() {
var dataNameWrappers_action = "" + $(this).attr("data-name");
$(this).prepend("<p class='edit-link'><a>Edit</a></p>");
var dataNameWrapperEditLink = $("div#desktopSidebar p.edit-link a");
dataNameWrapperEditLink.each(function() {
$(this).attr('href', <<stuck_here>>);
});
});
Any help will be great.
Thanks
As requested, here is my sidebar HTMl structure
<div id="desktopSidebar">
<div class="sidebar userbox">
<h3 class="sidebarheader"> Welcome {{username}}}</h3>
</div>
<div data-name="social_media_sitewide" class="sidebar socialmedia">
<h3 class="sidebarheader">Follow Tennis-Chat</h3>
</div>
<div data-name="site_promotions" class="sidebar promotions">
<h3 class="sidebarheader">Current Promotions</h3>
</div>
<div data-name="livescores" class="sidebar Livescores">
<h3 class="sidebarheader">Live Scores</h3>
</div>
<div class="sidebar tournaments">
<h3 class="sidebarheader">Tournaments</h3>
</div>
<div data-name="featured-profiles" class="sidebar profiles">
<h3 class="sidebarheader">Today's Profile: {{featured_profile_name}}</h3>
</div>
<div data-name="side_advertisment" class="sidebar Advertisement">
<h3 class="sidebarheader">Advertisement</h3>
</div>
<div class="sidebar Headlines">
<h3 class="sidebarheader">Tennis-Chat Headlines</h3>
</div>
<div class="sidebar mostrecent" id="mostRecentTopics">
<h3 class="sidebarheader">Most Recent Posts</h3>
</div>
</div>

I don't know why you are using a second loop to add the HREFs when you already have everything you need.
Working fiddle here: http://jsfiddle.net/Q4j8S/.
HTML:
<div id="desktopSidebar">
<div class="sidebar userbox">
<h3 class="sidebarheader"> Welcome {{username}}}</h3>
</div>
<div data-name="social_media_sitewide" class="sidebar socialmedia">
<h3 class="sidebarheader">Follow Tennis-Chat</h3>
</div>
<div data-name="site_promotions" class="sidebar promotions">
<h3 class="sidebarheader">Current Promotions</h3>
</div>
<div data-name="livescores" class="sidebar Livescores">
<h3 class="sidebarheader">Live Scores</h3>
</div>
<div class="sidebar tournaments">
<h3 class="sidebarheader">Tournaments</h3>
</div>
<div data-name="featured-profiles" class="sidebar profiles">
<h3 class="sidebarheader">Today's Profile: {{featured_profile_name}}</h3>
</div>
<div data-name="side_advertisment" class="sidebar Advertisement">
<h3 class="sidebarheader">Advertisement</h3>
</div>
<div class="sidebar Headlines">
<h3 class="sidebarheader">Tennis-Chat Headlines</h3>
</div>
<div class="sidebar mostrecent" id="mostRecentTopics">
<h3 class="sidebarheader">Most Recent Posts</h3>
</div>
</div>
JavaScript:
var dataNameWrappers = $("div#desktopSidebar div[data-name]");
dataNameWrappers.each(function() {
var dataNameWrappers_action = $(this).attr("data-name");
console.log('data-name ' + dataNameWrappers_action);
$(this).prepend('<p class="edit-link">Edit</p>');
/* Don't need this
var dataNameWrapperEditLink = $("div#desktopSidebar p.edit-link a");
dataNameWrapperEditLink.each(function() {
$(this).attr('href', dataNameWrappers_action);
});
*/
});

Instead of iterating through the a tags after you do the prepend, it may be better to make the HTML fragment with the desired href attribute.
Here is the code that accomplishes that:
$('#desktopSidebar .sidebar[data-name]').each(function(index, el){
var href = $(el).attr('data-name') + ".txt";
$(el).prepend('<p class="edit-link">Edit');
});