Click here to Skip to main content
15,867,330 members
Home / Discussions / JavaScript
   

JavaScript

 
GeneralRe: JavaScript Pin
jschell10-Mar-23 11:07
jschell10-Mar-23 11:07 
QuestionDisable a textbox inside Repeater control when any of the DropDownList values also inside Repeater, is selected Pin
Ihechi Alozie2-Mar-23 12:17
Ihechi Alozie2-Mar-23 12:17 
AnswerRe: Disable a textbox inside Repeater control when any of the DropDownList values also inside Repeater, is selected Pin
Richard Deeming2-Mar-23 21:27
mveRichard Deeming2-Mar-23 21:27 
QuestionHow to replace the select of my html Pin
sanphil2-Mar-23 1:07
sanphil2-Mar-23 1:07 
QuestionHow to display a pop up without click and without login Pin
Member 1593182922-Feb-23 6:20
Member 1593182922-Feb-23 6:20 
AnswerRe: How to display a pop up without click and without login Pin
Jeremy Falcon27-Feb-23 7:29
professionalJeremy Falcon27-Feb-23 7:29 
QuestionHow to show or hide a div with only class without ID Pin
flexi220220-Feb-23 6:36
flexi220220-Feb-23 6:36 
AnswerRe: How to show or hide a div with only class without ID Pin
Richard Deeming20-Feb-23 21:54
mveRichard Deeming20-Feb-23 21:54 
With the specified markup, the only way to identify the correct panel is to loop through the sibling elements until you find it:
HTML
<a data-nom="2001" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
    ajouter au panier
</a><br>

<div class="panel" style="display:none">
    <a data-qte2="0" class=" ajouter-panier ">
        retirer panier
    </a><br>
</div>
<a data-nom="2002" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
    ajouter au panier
</a><br>

<div class="panel" style="display:none">
    <a data-qte2="0" class=" ajouter-panier ">
        retirer panier
    </a><br>
</div>
<a data-nom="2003" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
    ajouter au panier
</a><br>

<div class="panel" style="display:none">
    <a data-qte2="0" class=" ajouter-panier ">
        retirer panier
    </a>
</div>
JavaScript
document.addEventListener("click", e => {
	let el = e.target;
	if (el.tagName !== "A") { el = el.closest("a"); }
	if (!el || !el.classList.contains("b-items__item__add-to-cart")) { return; }
	
	e.preventDefault();
	
	let panel = el.nextElementSibling;
	while (panel && panel.tagName !== "DIV"){
		panel = panel.nextElementSibling;
	}
	
	if (panel) {
		panel.style.display = "block";
	}
});
Demo[^]

If you can change the markup structure so that each link and panel have a wrapper element, then it becomes slightly easier:
HTML
<div class="item-card">
    <a data-nom="2001" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
        ajouter au panier
    </a><br>

    <div class="panel" style="display:none">
        <a data-qte2="0" class=" ajouter-panier ">
            retirer panier
        </a><br>
    </div>
</div>
<div class="item-card">
    <a data-nom="2002" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
        ajouter au panier
    </a><br>

    <div class="panel" style="display:none">
        <a data-qte2="0" class=" ajouter-panier ">
            retirer panier
        </a><br>
    </div>
</div>
<div class="item-card">
    <a data-nom="2003" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
        ajouter au panier
    </a><br>

    <div class="panel" style="display:none">
        <a data-qte2="0" class=" ajouter-panier ">
            retirer panier
        </a>
    </div>
</div>
JavaScript
document.addEventListener("click", e => {
	let el = e.target;
	if (el.tagName !== "A") { el = el.closest("a"); }
	if (!el || !el.classList.contains("b-items__item__add-to-cart")) { return; }
	
	const card = el.closest(".item-card");
	if (!card) { return; }
	
	const panel = card.querySelector(".panel");
	if (!panel) { return; }
	
	e.preventDefault();
	panel.style.display = "block";
});
Demo[^]

In either case, it's best to avoid the onclick attribute, and wire up the event handlers in code. In this case, I've used event delegation[^], which is generally more efficient than adding handlers to multiple elements, and also allows the code to handle events on elements which are added to the DOM at some later time.



"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

GeneralRe: How to show or hide a div with only class without ID Pin
flexi220221-Feb-23 0:03
flexi220221-Feb-23 0:03 
GeneralRe: How to show or hide a div with only class without ID Pin
Richard Deeming21-Feb-23 1:43
mveRichard Deeming21-Feb-23 1:43 
GeneralRe: How to show or hide a div with only class without ID Pin
flexi220221-Feb-23 1:59
flexi220221-Feb-23 1:59 
GeneralRe: How to show or hide a div with only class without ID Pin
flexi220221-Feb-23 3:41
flexi220221-Feb-23 3:41 
GeneralRe: How to show or hide a div with only class without ID Pin
Richard Deeming21-Feb-23 22:11
mveRichard Deeming21-Feb-23 22:11 
AnswerRe: How to show or hide a div with only class without ID Pin
Ben A Johnson24-Apr-23 3:48
Ben A Johnson24-Apr-23 3:48 
Questionwant to help in javascript code Pin
Member 1592799418-Feb-23 4:33
Member 1592799418-Feb-23 4:33 
AnswerRe: want to help in javascript code Pin
Richard Deeming19-Feb-23 21:56
mveRichard Deeming19-Feb-23 21:56 
QuestionJavascript Pin
niveditha2216-Feb-23 22:20
niveditha2216-Feb-23 22:20 
AnswerRe: Javascript Pin
CHill6016-Feb-23 22:21
mveCHill6016-Feb-23 22:21 
QuestionHow do I make an Element slide-in, after user selects choice from drop-down, then it slides out. Pin
Garry 202316-Feb-23 12:07
Garry 202316-Feb-23 12:07 
Questionapi connection culendar Pin
jagadeesh omkaram14-Feb-23 19:00
jagadeesh omkaram14-Feb-23 19:00 
AnswerRe: api connection culendar Pin
Richard MacCutchan14-Feb-23 22:05
mveRichard MacCutchan14-Feb-23 22:05 
AnswerRe: api connection culendar Pin
Dave Kreskowiak15-Feb-23 1:32
mveDave Kreskowiak15-Feb-23 1:32 
QuestionCopying from billing address to mailing address if they are the same not working correctly Pin
samflex11-Feb-23 12:15
samflex11-Feb-23 12:15 
AnswerRe: Copying from billing address to mailing address if they are the same not working correctly Pin
Richard Deeming12-Feb-23 22:02
mveRichard Deeming12-Feb-23 22:02 
GeneralRe: Copying from billing address to mailing address if they are the same not working correctly Pin
samflex13-Feb-23 5:14
samflex13-Feb-23 5:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.