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>
Related
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>
I have started some blogs using Weebly now I want to do several changes to the blog UI, everything went well until I wanted to do this. I wanted to get the image path from the image inside blog-content and set it on the blog-post-image. In my head, this jquery looks logical, but somewhere error lays.
Few things to care about, I should use each because there are many of the blog posts and I cannot use ids because of the same reason, cannot use the same id multiple times.
HTML:
$('.blog-post-image').each(function() {
var $me = $(this);
var blogPostImage = $me.siblings('.blog-content').children('img').attr('src');
$me.attr('src', blogPostImage);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
.blog-post-image doesn't have any siblings. Siblings are immediate children of the same parent element, but there are no other elements in the div containing <img class="blog-post-image" />.
You need to go up to the .blog-header to get its sibling.
Also, instead of using .each(), you can use a function in .attr(). It automatically loops, and assigns the return value to the attribute.
$('.blog-post-image').attr('src', function() {
return $(this).closest('.blog-header').siblings('.blog-content').find('img').attr('src');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
Two things:
1.) .blog-content is not a sibling of .blog-post-image
2.) .children() only looks one level deep to find the element you are looking for.
What you need to do is traverse upwards to find a sibling of .blog-content and then use the .find() function to do a deep search of the given DOM node to find what you're looking for.
$('.blog-post-image').each(function() {
var me = $(this);
var blogPostImage = me.parent().parent().parent().siblings('.blog-content').find('img').attr('src');
me.attr('src', blogPostImage);
});
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">15/6/2021</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
</div>
</div>
</body>
I want to show a modal popup when the user clicked a button, but it keeps adding to the innerHTML
<div class="popup-container hide">
<div class="popup-wrapper">
<!-- <div class="popup-content"> -->
<!-- </div> -->
<div class="order-container">
<div class="value-container">
<button class="minusBtn"><img src="icon/minus.png" alt="" width="30px"></button>
<div class="value">1</div>
<button class="plusBtn"><img src="icon/plus.png" alt="" width="30px"></button>
</div>
<button class="orderBtn">Add To Cart</button>
</div>
</div>
</div>
Here I create a new div and insert it into the parent, and showing the clicked data with literal template
let content = document.createElement('div');
content.classList.add('popup-content');
content.innerHTML = `
<div class="popup-image">
<img src="mcd/${item.img}" alt="">
</div>
<div class="popup-name">
${item.name}
</div>
<div class="popup-price">
${item.price}
</div>
`;
let wrapper = document.querySelector('.popup-wrapper');
let orderContainer = document.querySelector('.order-container');
wrapper.insertBefore(content, orderContainer);
You need to remove all existing .popup-content elements before you insert a new one if you want only one to appear.
document.querySelectorAll('.popup-content').forEach(el => el.remove());
let content = document.createElement('div');
...
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.
I want to get the text on click with a certain class but nothing works. I have a div with 2 p tags and I want to get both separate. Also, I want to append them. .append() appends but just keeps adding all targeted events. empty().append() gives me random results (on first click it works, on second I get half of the text etc). Ive tried most of what I could find on stack overflow but nothing helped. Any help would be great!
Ive tried:
$(event.target).text(); //that gives me the text, but not both p elements separate
$(this).hasClass('.video-title'); //only returns to me true/false
var title= document.getElementsByClassName("video-title")[0].innerHTML; //doesn't give me the current element.
$('p.video-title').innerHTML; //doesnt help either
HTML
<div class="video-container">
<iframe id="vid_frame" src="https://www.youtube.com/embed/xxx?rel=0&showinfo=0&autohide=1" width="900" height="450"></iframe>
<div id="video-info"></div>
</div>
<div class="col-sm-4 video-col">
<div class="video-wrapper" onClick="attachSrc('yyy', event)">
<img src="assets/images/thumbnail/yourHeart_official.jpg" width="260" height="160">
<div class="overlay">
<p class="video-title">title 1</p>
<p class="video-author">author 1</p>
</div>
</div>
</div>
<div class="col-sm-4 video-col">
<div class="video-wrapper" onClick="attachSrc('xxx', event)">
<img src="assets/images/thumbnail/yourHeart_karaoke.jpg" width="260" height="160">
<div class="overlay">
<p class="video-title">title 2</p>
<p class="video-author">author 2</p>
</div>
</div>
</div>
<script>
function attachSrc(id, event) {
var text = $(event.target).text();
$('#video-info').append(text);
}
</script>
As you are using jQuery, I would recommend you to use unobtrusive event handler and use .on() to attach event handlers.
Here in example I have attached event with wrapper element and DOM traversal method to traverse and target desired element.
And to persists arbitrary data use data-* prefixed custom attribute which can be fetched using .data(key)
<div class="video-wrapper" data-id="yyy">
Script
$('.video-col').on('click', '.video-wrapper', function() {
var elem = $('#video-info').empty();
var title = $(this).find('.video-title').text();
elem.append(title);
console.log(title);
var author= $(this).find('.video-author').text();
elem.append(author);
console.log(author);
console.log($(this).data('id'));// To fetch custom data associated with element
});
$(function() {
$('.video-col').on('click', '.video-wrapper', function() {
console.clear();
var elem = $('#video-info').empty();
var title = $(this).find('.video-title').text();
elem.append(title);
console.log(title);
var author = $(this).find('.video-author').text();
elem.append(author);
console.log(author);
console.log($(this).data('id')); // To fetch custom data associated with element
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-container">
<div id="video-info"></div>
</div>
<div class="col-sm-4 video-col">
<div class="video-wrapper" data-id="yyy">
<img src="assets/images/thumbnail/yourHeart_official.jpg" width="260" height="160">
<div class="overlay">
<p class="video-title">title 1</p>
<p class="video-author">author 1</p>
</div>
</div>
</div>
<div class="col-sm-4 video-col">
<div class="video-wrapper" data-id="xxx">
<img src="assets/images/thumbnail/yourHeart_karaoke.jpg" width="260" height="160">
<div class="overlay">
<p class="video-title">title 2</p>
<p class="video-author">author 2</p>
</div>
</div>
</div>