• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Child Selector?

KittenKatja

Active Coder
I have only come this far:
JavaScript:
function setSelected() {
  event.target.parentElement.helpMeHere("clicked").classList.remove("clicked");
  event.target.classList.add("clicked")
}
The W3Schools says .children, .childNodes, and .childElementCount.

HTML:
<div>
    <a>1</a>
    <a class="clicked">2</a>
    <a>3</a>
</div>
<div>
    <a class="clicked">4</a>
    <a>5</a>
    <a onclick="setSelected()">6</a>
</div>
HTML:
<div>
    <a>1</a>
    <a class="clicked">2</a>
    <a>3</a>
</div>
<div>
    <a class="">4</a>
    <a>5</a>
    <a class="clicked" onclick="setSelected()">6</a>
</div>
 
Last edited by a moderator:

Antero360

King Coder
Staff Team
Security Analyst
Code:
//to select all elements with given class
var children = document.querySelectorAll('.clicked');

for(var child of children){
    child.addEventListener('click', (event) => {
        //do stuffs here
    });
}
 

KittenKatja

Active Coder
I believe, I encountered a problem I had before, too, but can't fix it this time.
JavaScript:
function setSelected() {let a = event.target;console.log(a.outerHTML);let b = a.parentElement.querySelectorAll("clicked").classList.remove("clicked");console.log(b.outerHTML);if(a.hasAttribute('class')){a.setAttribute('class')};a.classList.add("clicked");console.log(a.outerHTML)}
Only the first console.log gets written, and then the error says there's something wrong with remove() in setSelected(), setBackground(), and the HTMLAnchorElement.onclick
 

Antero360

King Coder
Staff Team
Security Analyst
I believe, I encountered a problem I had before, too, but can't fix it this time.
JavaScript:
function setSelected() {let a = event.target;console.log(a.outerHTML);let b = a.parentElement.querySelectorAll("clicked").classList.remove("clicked");console.log(b.outerHTML);if(a.hasAttribute('class')){a.setAttribute('class')};a.classList.add("clicked");console.log(a.outerHTML)}
Only the first console.log gets written, and then the error says there's something wrong with remove() in setSelected(), setBackground(), and the HTMLAnchorElement.onclick
JavaScript:
function setSelected()
{
    let a = event.target;
    console.log(a.outerHTML);
    
    let b = a.parentElement.querySelectorAll("clicked").classList.remove("clicked");
    console.log(b.outerHTML);
    
    if(a.hasAttribute('class'))
    {
        a.setAttribute('class')
    };
    
    a.classList.add("clicked");
    console.log(a.outerHTML)
}

@KittenKatja It would make things a hell of a lot easier, for you, and for anyone looking at your code, to not minimize it into a one-liner. Yes, one-liners are awesome for performance and space saving, but are a pain in the you know what to debug. Hopefully now it has been expanded, I do hope you can see a few errors. Also, please post up any errors you are getting in console
 

Antero360

King Coder
Staff Team
Security Analyst
JavaScript:
function setSelected()
{
    let a = event.target;
    console.log(a.outerHTML);
   
    let b = a.parentElement.querySelectorAll("clicked").classList.remove("clicked");
    console.log(b.outerHTML);
   
    if(a.hasAttribute('class'))
    {
        a.setAttribute('class')
    };
   
    a.classList.add("clicked");
    console.log(a.outerHTML)
}

@KittenKatja It would make things a hell of a lot easier, for you, and for anyone looking at your code, to not minimize it into a one-liner. Yes, one-liners are awesome for performance and space saving, but are a pain in the you know what to debug. Hopefully now it has been expanded, I do hope you can see a few errors. Also, please post up any errors you are getting in console
Off the bat, I can tell you one error that you will run into: if you are looking for just ONE element,
document.querySelector('.className') => this will return the first element with the given classname/id name

if you want all elements:
document.querySelectorAll('.className') => this will give you each node. NOTE: if you use this one, you are going to have to iterate through the list of elements.
 
Top