Why is dataset undefined sometimes?

Why is dataset undefined sometimes? - javascript

Why is const filter undefined sometimes when i press it..I have used data-filter on buttons to sort store items..but sometimes when i press a button with dataset filter i get undefined
const buttons = document.querySelectorAll('.filter-btn');
const storeItems = document.querySelectorAll('.store-item');
buttons.forEach((button) => {
button.addEventListener('click', (e) => {
e.preventDefault()
const filter = e.target.dataset.filter
console.log(filter)
storeItems.forEach((item) => {
if (filter === 'all') {
item.style.display = 'block'
} else {
if (item.classList.contains(filter)) {
item.style.display = 'block'
} else {
item.style.display = 'none'
}
}
})
})
})
.img-wrap img {
width : 300px;
}
<div class="container-fluid store-wrap">
<div class="store-heading">
<h1>OUR <span>STORE</span></h1>
<div class="button-wrap">
<button data-filter="all" class="filter-btn"><p>ALL</p></button>
<button data-filter="cakes" class="filter-btn"><p>CAKES</p></button>
<button data-filter="cupcakes" class="filter-btn"><p>CUPCAKES</p></button>
<button data-filter="sweets" class="filter-btn"><p>SWEETS</p></button>
<button data-filter="doughnuts" class="filter-btn"><p>DOUGHNUTS</p></button>
</div>
<div class="search-wrap">
<div class="icon-wrap">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<input type="text" placeholder="Item...">
</div>
</div>
<div class="row store">
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1614707267537-b85aaf00c4b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1603532648955-039310d9ed75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="cakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1089&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="sweets">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1600359756098-8bc52195bbf4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Sweets</h3>
<h3>$5</h3>
</div>
</div>
</div>
<div class="row store">
<div class="col-lg store-item doughnuts" data-item="doughnuts">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1533910534207-90f31029a78e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Doughnuts</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="cakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1602351447937-745cb720612f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1615837136007-701de6015cfb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcakes</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item sweets" data-item="sweets">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1600359746315-119f1360d663?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Sweets</h3>
<h3>$5</h3>
</div>
</div>
</div>
</div>

e.target will refer to the innermost item clicked. If you add an event listener to the container, and the container has a child element, e.target may refer to the container (if you clicked outside the child), or it may refer to the child (if you clicked inside the child). That's what's happening here. If you click directly on one of the texts inside the button, you'll be clicking on a <p> tag, not the button - and that'll be the target.
<button data-filter="all" class="filter-btn"><p>ALL</p></button>
^^^^^^^^^^
Refer to the button you already have in scope instead of to e.target.
const buttons = document.querySelectorAll('.filter-btn');
const storeItems = document.querySelectorAll('.store-item');
buttons.forEach((button) => {
button.addEventListener('click', (e) => {
e.preventDefault()
const { filter } = button.dataset;
console.log(filter)
storeItems.forEach((item) => {
if (filter === 'all') {
item.style.display = 'block'
} else {
if (item.classList.contains(filter)) {
item.style.display = 'block'
} else {
item.style.display = 'none'
}
}
})
})
})
.img-wrap img {
width : 300px;
}
<div class="container-fluid store-wrap">
<div class="store-heading">
<h1>OUR <span>STORE</span></h1>
<div class="button-wrap">
<button data-filter="all" class="filter-btn"><p>ALL</p></button>
<button data-filter="cakes" class="filter-btn"><p>CAKES</p></button>
<button data-filter="cupcakes" class="filter-btn"><p>CUPCAKES</p></button>
<button data-filter="sweets" class="filter-btn"><p>SWEETS</p></button>
<button data-filter="doughnuts" class="filter-btn"><p>DOUGHNUTS</p></button>
</div>
<div class="search-wrap">
<div class="icon-wrap">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<input type="text" placeholder="Item...">
</div>
</div>
<div class="row store">
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1614707267537-b85aaf00c4b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1603532648955-039310d9ed75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="cakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1089&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="sweets">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1600359756098-8bc52195bbf4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Sweets</h3>
<h3>$5</h3>
</div>
</div>
</div>
<div class="row store">
<div class="col-lg store-item doughnuts" data-item="doughnuts">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1533910534207-90f31029a78e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Doughnuts</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="cakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1602351447937-745cb720612f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1615837136007-701de6015cfb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcakes</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item sweets" data-item="sweets">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1600359746315-119f1360d663?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Sweets</h3>
<h3>$5</h3>
</div>
</div>
</div>
</div>
If you had to gain another reference to the element you attached the event listener to and didn't have button already in scope, you could use e.currentTarget instead of e.target - .target will refer to the innermost element (the one that the event was dispatched to), but e.currentTarget will refer to the element the listener is attached to.

The problem is occoured for event deligation. You have a p tag in button. So, for event deligatoin, sometimes click goes to the p tag instead of button. You can fix the issue in this way-
const filter = e.target.closest("button").dataset.filter

Related

Loop For use in setinterval carousel

I have a little problem with my setinterval, that is to say that I would like my index to start at -1 as it is when i go to 1 and the index goes to 0 to add d-none but that does not does not give the desired result so if my i === 1 else index ===0 and y cant y have try multiple function but its not good
code html:
<section class="mb-5">
<div class="carou mb-5 pb-5">
<div class="divCarou">
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-luxry-sofa.jpg" alt="">
</div>
<div class="divPJS1 pt-3">
<p>Luxury Sofa</p>
<p class="pRjs">$600.00</p>
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-gloves.jpg" alt="">
</div>
<div class="d-flex justify-content-center gap-4 mt-3">
<div class="bRoun1">
<p>SALE!</p>
</div>
<div>
<p>Luxury Sofa</p>
<p class="pRjs">$600.00</p>
</div>
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-cups.jpg" alt="">
</div>
<div class="divPJS1 pt-3">
<p>Luxury Sofa</p>
<p class="pRjs">$600.00</p>
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-bag.jpg" alt="">
</div>
<div class="d-flex justify-content-center gap-4 mt-3">
<div class="bRoun1">
<p>SALE!</p>
</div>
<div>
<p>Luxury Sofa</p>
<p class="pRjs">$600.00</p>
</div>
</div>
</div>
</div>
<div class="divCarou d-none">
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-bed.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-modern-sofa.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-plates.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-shoes.jpg" alt="">
</div>
</div>
</div>
<div class="divCarou d-none">
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-tshitr.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products/product-bag-2-700x500.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products/product-jacket-700x500.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-plates.jpg" alt="">
</div>
</div>
</div>
<div class="divCarou d-none">
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products/product-tshitr-white-700x500.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-bag.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-cups.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-plates.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="d-flex gap-3 justify-content-center">
<i class="fa-regular fa-circle btnCarou active"></i>
<i class="fa-regular fa-circle btnCarou"></i>
<i class="fa-regular fa-circle btnCarou"></i>
<i class="fa-regular fa-circle btnCarou"></i>
</div>
</section>
code js:
let i2 = document.querySelectorAll(".btnCarou");
let i3 = document.querySelectorAll(".btnCarou");
let divCarou = document.querySelectorAll(".divCarou");
let divCarou2 = document.querySelectorAll(".divCarou");
function Carou2() {
setInterval( () => {
for (let i = 1, index = 0 ; i < i2.length, index = i3.length; i++ , index++) {
if (![... i2[i].classList].includes("active")) {
i2[i].classList.add("active");
divCarou[i].classList.remove("d-none");
if ([... i3[index].classList].includes("active")) {
i3[index].classList.remove("active");
divCarou2[index].classList.add("d-none");
}
}
}
}, 2000)
}
Carou2()

How to hide product item if the price is 0

Some of my products have 0 price. Until I fix this issue I want to hide those products from
collection pages.
So,
How can I hide the .productItem or .ItemOrj if the .productPrice span is == ₺0,00 , else show
Look code below:
<div id="ProductPageProductList" class="ProductList sort_4">
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.950,00
</span>
</div>
</div>
</div>
</div>
</div>
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.250,00
</span>
</div>
</div>
</div>
</div>
</div>
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺0,00
</span>
</div>
</div>
</div>
</div>
</div>
</div>
I have also tried but not worked:
var amount = parseFloat($('.productPrice span').html().replace(",", "."));
if(amount === 0){
$('.productItem').css("display", "none");
}else{
$('.productItem').css("display", "block");
}

I stripped out the additional HTML for my answer since it doesn't affect my answer.
But I loop through each item, and get the text value of the productPrice div and strip out all numeric values then parse it to a Float. Then if its under 0, I hide the parent productItem.
$(document).ready(function(){
$(".productItem").each(function(){
let price = parseFloat($(this).find(".productPrice").text().replace(/[^0-9]/g,""));
if(price == 0){
$(this).hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productItem">
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.250,00
</span>
</div>
</div>
</div>
<div class="productItem">
<div class="productPrice ">
<div class="discountPrice">
<span>
₺0
</span>
</div>
</div>
</div>

How to copy all the text content inside the div

I have a html in a given format:
<div class="export-details" id="export-area">
<div class="row m-0">
<div class="col-lg-6">
<h1 class="titleStyling py-2">Analytics testing-2</h1>
</div>
<div class="col-lg-6 text-right">
<i class="fas fa-copy margin-left10 margin-right-10 cursorPointer" name="download" style="font-size: 27px !important;color: #000000;" title="Copy to Clipboard"></i>
<i class="fas fa-file-pdf margin-left10 margin-right-10 cursorPointer" name="download" style="font-size: 27px !important;color: #df1010;" title="Export to Pdf"></i>
<ion-icon class="star-icon pr-2 starIcon cursorPointer icon icon-md ion-md-star" role="img" aria-label="star" title="Set Favorite">
</ion-icon>
<ion-icon class="star-icon shareIcon margin-left10 margin-right-10 cursorPointer icon icon-md ion-md-share" name="share" role="img" aria-label="share" title="Share Protocol">
</ion-icon>
</div>
</div>
<!---->
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<!---->
<div>
<div class="sectionTitle d-flex justify-content-between align-items-center">
<label class="formLabelStyles sectionheading">Recommendations</label>
</div>
<!---->
<div>
<div class="contentAlignment">
<span>
<p>testing purpose</p>
</span>
</div>
</div>
</div>
</div>
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<div class="sectionTitle d-flex justify-content-between align-items-center">
<label class="formLabelStyles sectionheading">Meta Information</label>
</div>
<div class="row rowSpacing">
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label>Publisher: </label>
</div>
<div class="displayFlex">
<!---->
<div class="child">
<span>ProtocolNow</span><span class="comma">, </span>
</div>
<div class="child">
<span>Other Medical Society</span><span class="comma">, </span>
</div>
<div class="child">
<span>Valley Perinatal</span><span class="comma">, </span>
</div>
</div>
</div>
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label style="width: 111%;">Medical Field: </label>
</div>
<div class="displayFlex">
<!---->
<div class="child">
<span>Coronavirus - Covid 19</span><span class="comma">, </span>
</div>
<div class="child">
<span>Billing</span><span class="comma">, </span>
</div>
</div>
</div>
<!---->
<!---->
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label><strong>Author: </strong></label>
</div>
<div class="displayFlex">
<div class="child">
<span>Neha KA</span><span class="comma">, </span>
</div>
</div>
</div>
</div>
</div>
</div>
I want to copy all the displayed text into clipboard:
<div id="a" onclick="copyDivToClipboard()"> Click to copy all of this content </div>
I have made this worked by this js function:
var div = document.querySelectorAll(".export-details")[0].textContent;
function copyDivToClipboard() {
const el = document.createElement("textarea");
el.value = div;
document.body.appendChild(el);
el.select();
document.execCommand("copy");
document.body.removeChild(el);
}
However, it adds too many spaces between the text.
When I changed from textContent to innerText, it is working fine.
But according to this answer, ...innerText is much more performance-heavy: it requires layout information to return the result.
So, how can the text be copied to clipboard exactly similarly by using innerText.
Codepen

Try with document.createRange
function copyDivToClipboard() {
var range = document.createRange();
range.selectNode(document.getElementById("export-area"));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();
}
<div class="export-details" id="export-area">
<div class="row m-0">
<div class="col-lg-6">
<h1 class="titleStyling py-2">Analytics testing-2</h1>
</div>
<div class="col-lg-6 text-right">
<i class="fas fa-copy margin-left10 margin-right-10 cursorPointer" name="download" style="font-size: 27px !important;color: #000000;" title="Copy to Clipboard"></i>
<i class="fas fa-file-pdf margin-left10 margin-right-10 cursorPointer" name="download" style="font-size: 27px !important;color: #df1010;" title="Export to Pdf"></i>
<ion-icon class="star-icon pr-2 starIcon cursorPointer icon icon-md ion-md-star" role="img" aria-label="star" title="Set Favorite">
</ion-icon>
<ion-icon class="star-icon shareIcon margin-left10 margin-right-10 cursorPointer icon icon-md ion-md-share" name="share" role="img" aria-label="share" title="Share Protocol">
</ion-icon>
</div>
</div>
<!---->
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<!---->
<div>
<div class="sectionTitle d-flex justify-content-between align-items-center">
<label class="formLabelStyles sectionheading">Recommendations</label>
</div>
<!---->
<div>
<div class="contentAlignment">
<span>
<p>testing purpose</p>
</span>
</div>
</div>
</div>
</div>
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<div class="sectionTitle d-flex justify-content-between align-items-center">
<label class="formLabelStyles sectionheading">Meta Information</label>
</div>
<div class="row rowSpacing">
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label>Publisher: </label>
</div>
<div class="displayFlex">
<!---->
<div class="child">
<span>ProtocolNow</span><span class="comma">, </span>
</div>
<div class="child">
<span>Other Medical Society</span><span class="comma">, </span>
</div>
<div class="child">
<span>Valley Perinatal</span><span class="comma">, </span>
</div>
</div>
</div>
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label style="width: 111%;">Medical Field: </label>
</div>
<div class="displayFlex">
<!---->
<div class="child">
<span>Coronavirus - Covid 19</span><span class="comma">, </span>
</div>
<div class="child">
<span>Billing</span><span class="comma">, </span>
</div>
</div>
</div>
<!---->
<!---->
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label><strong>Author: </strong></label>
</div>
<div class="displayFlex">
<div class="child">
<span>Neha KA</span><span class="comma">, </span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="a" onclick="copyDivToClipboard()"> Click to copy all of this content </div>

when I want to copy something to the control + C I do this.
const value = document.querySelector('#id').innerText
navigator.clipboard.writeText(value)
alert(`Copied value ${value}`)

Jquery check if each element's child exist, change specific element's css

It's the first time to ask a question through stackoverflow.
I hope someone can help to solve this problem.
my purpose is hide X picture when Y picture is exist in each review area.
kind of widget code I only possible to input custom CSS and js.
I tried like below with jquery, but i think it's wrong.
Please, help to solve this problem.
/*$('#pd-review-list .widget_w .widget_item').each(function(index) {
// index has the count of the current iteration
var foo = this;
console.log( foo );
var zoo = $(foo).find('.widget_item_tab_2_photo > img');
console.log(zoo);
if(zoo.length === 1) {
$('.widget_item > .widget_item_product').css('display', 'none');
}
});*/
if($('.widget_w .widget_item > .widget_item_tab_2_photo > img').next('img').length > 0) {
$('.widget_item > .widget_item_product').css('display', 'none');
} else {
$('.widget_item > .widget_item_product').css('display', 'block');
};
// if each .widget_w .widget_item > widget_item_tab_2_photo > img tag exist = in that element's .widget_item > .widget_item_product css change display: none
.widget_item_product {
height: 300px;
width: 300px;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="widget_w">
<div class="widget_item" id="review_normal_8875193" value="8875193">
<div class="widget_item_product" style="background-image:url('https://akuo.ai/wp-content/uploads/2020/08/placeholder.png')" onclick="redirect_to_product('23')"></div>
<div style="display:flex;flex-direction:column;flex-grow:1;width:1px;" class="widget_item_size">
<div class="widget_item_tab_1 widget_item_tab_1_2">
<div style="margin-right:10px;display:flex;justify-content: flex-start;"></div>
<div style="color: #777777;"></div>
</div>
<div class="widget_item_tab_1 widget_item_tab_1_1">
<div class="widget_item_username">
<span class="widget_item_username_1">NAME </span><span class="widget_item_username_2">네이버 페이 ***</span>
</div>
</div>
<div class="widget_item_tab_2">
<div class="widget_item_tab_2_text" onclick="review_more_11924()">
<div class="widget_item_content"><p>Lorem Ipsum</p></div>
<span class="widget_item_more_button widget_item_more_button_1">더보기 <i class="la la-angle-down"></i></span>
<span class="widget_item_more_button widget_item_more_button_2">접기 <i class="la la-angle-up"></i></span>
</div>
<div class="widget_item_tab_2_photo" onclick="review_detail_11924(8875193)"></div>
<div style="flex-grow:0"></div>
<div class="widget_item_date">2021년 1월 28일</div>
<div class="widget_item_tab_2_etc"> <!-- 20/08/11 수정중 -->
<div class="widget_item_etc" value="8875193"></div>
</div>
</div>
</div>
</div>
<div class="widget_item" id="review_normal_8875194" value="8875194">
<div class="widget_item_product" style="background-image:url('https://akuo.ai/wp-content/uploads/2020/08/placeholder.png')" onclick="redirect_to_product('23')"></div>
<div style="display:flex;flex-direction:column;flex-grow:1;width:1px;" class="widget_item_size">
<div class="widget_item_tab_1 widget_item_tab_1_2">
<div style="margin-right:10px;display:flex;justify-content: flex-start;"></div>
<div style="color: #777777;">
<i class="la la-camera" style="margin-right:10px; margin-left:10px; font-size:18px"></i></div>
</div>
<div class="widget_item_tab_1 widget_item_tab_1_1">
<div class="widget_item_username">
<span class="widget_item_username_1">NAME </span><span class="widget_item_username_2">winsh***</span>
</div>
</div>
<div class="widget_item_tab_2">
<div class="widget_item_tab_2_text widget_item_collapse" onclick="review_more_11924()">
<div class="widget_item_content"><p>Lorem Ipsum</p></div>
<span class="widget_item_more_button widget_item_more_button_1">더보기 <i class="la la-angle-down"></i></span>
<span class="widget_item_more_button widget_item_more_button_2">접기 <i class="la la-angle-up"></i></span>
</div>
<div class="widget_item_tab_2_photo" onclick="review_detail_11924(8875194)">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg" src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg" data-loaded="true">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg">
</div>
<div style="flex-grow:0"></div>
<div class="widget_item_date">2021년 1월 18일</div>
<div class="widget_item_tab_2_etc"> <!-- 20/08/11 수정중 -->
<div class="widget_item_etc" value="8875194"></div>
</div>
</div>
</div>
</div>
<div class="widget_item" id="review_normal_8875195" value="8875195">
<div class="widget_item_product" style="background-image:url('https://akuo.ai/wp-content/uploads/2020/08/placeholder.png')" onclick="redirect_to_product('23')"></div>
<div style="display:flex;flex-direction:column;flex-grow:1;width:1px;" class="widget_item_size">
<div class="widget_item_tab_1 widget_item_tab_1_2">
<div style="margin-right:10px;display:flex;justify-content: flex-start;"></div>
<div style="color: #777777;">
<i class="la la-camera" style="margin-right:10px; margin-left:10px; font-size:18px"></i></div>
</div>
<div class="widget_item_tab_1 widget_item_tab_1_1">
<div class="widget_item_username">
<span class="widget_item_username_1">NAME </span><span class="widget_item_username_2">winsh***</span>
</div>
</div>
<div class="widget_item_tab_2">
<div class="widget_item_tab_2_text widget_item_collapse" onclick="review_more_11924()">
<div class="widget_item_content"><p>Lorem Ipsum</p>/div>
<span class="widget_item_more_button widget_item_more_button_1">더보기 <i class="la la-angle-down"></i></span>
<span class="widget_item_more_button widget_item_more_button_2">접기 <i class="la la-angle-up"></i></span>
</div>
<div class="widget_item_tab_2_photo" onclick="review_detail_11924(8875195)">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg" src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg" data-loaded="true">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg">
</div>
<div style="flex-grow:0"></div>
<div class="widget_item_date">2021년 1월 18일</div>
<div class="widget_item_tab_2_etc"> <!-- 20/08/11 수정중 -->
<div class="widget_item_etc" value="8875195"></div>
</div>
</div>
</div>
</div>
</div>
</div>

Detect click on img element

<div class="portfolio-item">
<div class="hover-bg">
<a href="#">
<div class="hover-text">
<h4>Logo Design</h4>
<small>Branding</small>
<div class="clearfix"></div>
<i class="fa fa-plus"></i>
</div>
<img src="01.jpg" class="img-responsive ng-isolate-scope">
</a>
</div>
</div>
</div>
I am trying to detect clicks on an <img/> element. I have the following listener:
$('img').addEventListener 'click', ((event) ->
console.log event
), false
...but the event does not fire. How can I detect the click event?

I'd suggest you use .on("click") instead of .click().
$('img').on("click", function() {
console.log("image clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="portfolio-item">
<div class="hover-bg">
<a href="#">
<div class="hover-text">
<h4>Logo Design</h4>
<small>Branding</small>
<div class="clearfix"></div>
<i class="fa fa-plus"></i>
</div>
<img src="01.jpg" class="img-responsive ng-isolate-scope">
</a>
</div>
</div>

You can use jQuery click event as follows:
$(document).ready(function(){
$("img").click(function(){
alert("The image was clicked.");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="portfolio-item">
<div class="hover-bg">
<a href="#">
<div class="hover-text">
<h4>Logo Design</h4>
<small>Branding</small>
<div class="clearfix"></div>
<i class="fa fa-plus"></i>
</div>
<img src="http://placehold.it/140x100" class="img-responsive ng-isolate-scope">
</a>
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Why is dataset undefined sometimes? - javascript

The problem is occoured for event deligation. You have a p tag in button. So, for event deligatoin, sometimes click goes to the p tag instead of button. You can fix the issue in this way- const filter = e.target.closest("button").dataset.filter

Related

Loop For use in setinterval carousel

How to hide product item if the price is 0

How to copy all the text content inside the div

Jquery check if each element's child exist, change specific element's css

Detect click on img element

Categories

Resources