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.
Related
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 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>
The content of the divs is going to be populated with javascript json. Now, I know how to select a div in javascript:
var hsc = document.getElementByID("hsc");
But how would I refer to eg. the title but only in the hsc div.
<div id="hsc">
<div id="title"></div>
<div id="jobs"></div>
...
</div>
<div id="cc">
<div id="title"></div
<div id="jobs"></div>
</div>
On a separate note, wouldn't 'title' and 'jobs' be better classified as classes, and not ids?
This would work:
var hsc = document.querySelectorAll("#hsc > .title");
But you need to change to valid html and use unique IDs and classes instead:
<div id="hsc">
<div class="title"></div>
<div class="jobs"></div>
...
</div>
<div id="cc">
<div class="title"></div>
<div class="jobs"></div>
</div>
IDs must be unique in HTML.
Change them to classes, and then you can use querySelector() to target them:
document.querySelector('.hsc .title').style.color= 'blue';
document.querySelector('.cc .title').style.color= 'red';
<div class="hsc">
<div class="title">Make me blue!</div>
<div class="jobs">Jobs</div>
</div>
<div class="cc">
<div class="title">Make me red!</div>
<div class="jobs">More jobs</div>
</div>
Just try
<div id="hsc">
<div id="a" class="title"></div>
<div id="b" class="jobs"></div>
...
</div>
<div id="cc">
<div id="c" class="title"></div
<div id="d"class="jobs"></div>
</div>
Because your HTML code is invalid because the id is already taken.
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');
});