Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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

Well-Known 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:
I can't tell how to fix that problem, when there doesn't already exist that property when the site is loaded.
The only other way I can think of is to add an empty element hidden from sight with that class for the sole purpose of fixing that dilemma.
And you are here just recounting events with 20/20 perfect hindsight.
OR, hear me out... you can work with what is known as a MutationObserver, to detect when a chosen element is loaded on the DOM.
 
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>
do a log to console at the beginning of that function and see what you are getting for the 'event' object. Then do a log to console on what you are getting for the object 'event.target'

also... in regards to this
1670508696113.png
If you go back on this thread's history, and if you go back to your previous post, I mentioned the possible set of solutions to that...
if you want to get all the elements with the class of 'clicked'
.querySelectorAll('.className')
NOTE: YOU WILL NEED TO ITERATE THROUGH EACH NODE HERE AND DO WHAT YOU NEED TO DO

if you want to grab the first object with the class of 'clicked'
.querySelector('.className')

ALSO: might want to consider doing
JavaScript:
document.querySelector('.className')
rather than event.target.parentElement...in order to find the element with the class of 'clicked'
 
The observer thing was a nice tutorial, but halfway through, I couldn't keep up and stopped comprehending it.
It's the type of tutorial I'd like to follow through.

Does querySelector() do something, that can be put into an if() statement?
Like returning the element if true, and the boolean "false" if not?
 
The observer thing was a nice tutorial, but halfway through, I couldn't keep up and stopped comprehending it.
It's the type of tutorial I'd like to follow through.

Does querySelector() do something, that can be put into an if() statement?
Like returning the element if true, and the boolean "false" if not?
no. querySelector just does one thing and one thing only, return the first object with the given class, otherwise returns empty.
querySelectorAll finds all elements with class, otherwise returns empty
 
JavaScript:
function setSelected() {
    let a = event.target;
    console.log(a.outerHTML);
    let b = a.parentElement.querySelector(".clicked");
    if(typeof b !== 'undefined' && b !== null){
        console.log(b.outerHTML);
        b.classList.remove("clicked");
        console.log(b.outerHTML)
    };
    if(a.hasAttribute('class') == false){
        a.setAttribute('class','');
        console.log(a.outerHTML)
    };
    a.classList.add("clicked");
    console.log(a.outerHTML)
}
Thanks for your help.
 
JavaScript:
function setSelected() {
    let a = event.target;
    console.log(a.outerHTML);
    let b = a.parentElement.querySelector(".clicked");
    if(typeof b !== 'undefined' && b !== null){
        console.log(b.outerHTML);
        b.classList.remove("clicked");
        console.log(b.outerHTML)
    };
    if(a.hasAttribute('class') == false){
        a.setAttribute('class','');
        console.log(a.outerHTML)
    };
    a.classList.add("clicked");
    console.log(a.outerHTML)
}
Thanks for your help.
just remove the semicolons at the end of those if statements and add them to those console logs, and you should be fine.
 
Why should I move the semicolon to the inside of the if(){} statement?
It's like in JSON, {[→],[[→],[→]],[←]} would become {[→],[[→],[→],][←]}.
It would be another thing with a language, where I have to put the semicolon at the end of each instruction, like GLSL.
I could just as well write typeof b !== 'undefined' && b !== null ? b.classList.remove('clicked'); and get rid of that placement debate altogether.
 
Why should I move the semicolon to the inside of the if(){} statement?
It's like in JSON, {[→],[[→],[→]],[←]} would become {[→],[[→],[→],][←]}.
It would be another thing with a language, where I have to put the semicolon at the end of each instruction, like GLSL.
I could just as well write typeof b !== 'undefined' && b !== null ? b.classList.remove('clicked'); and get rid of that placement debate altogether.
since when did an if-statement, (a conditional statement for that matter) become a JSON object?
 
Why should I move the semicolon to the inside of the if(){} statement?
It's like in JSON, {[→],[[→],[→]],[←]} would become {[→],[[→],[→],][←]}.
It would be another thing with a language, where I have to put the semicolon at the end of each instruction, like GLSL.
I could just as well write typeof b !== 'undefined' && b !== null ? b.classList.remove('clicked'); and get rid of that placement debate altogether.

Also
 
Why should I move the semicolon to the inside of the if(){} statement?
It's like in JSON, {[→],[[→],[→]],[←]} would become {[→],[[→],[→],][←]}.
It would be another thing with a language, where I have to put the semicolon at the end of each instruction, like GLSL.
I could just as well write typeof b !== 'undefined' && b !== null ? b.classList.remove('clicked'); and get rid of that placement debate altogether.
Also, for readability and consistency:
Doesn't make sense to have all other calls have semicolons after, except for the console logs, and vice versa. Either you have them or you don't. Granted, js is one of the few languages that don't care whether or not you use a semicolon, but for the sake of consistency and readability, use either or.

JavaScript:
function setSelected() {
    let a = event.target;
    console.log(a.outerHTML);
    let b = a.parentElement.querySelector(".clicked");
    if(typeof b !== 'undefined' && b !== null){
        console.log(b.outerHTML);
        b.classList.remove("clicked");
        console.log(b.outerHTML);
    }

    if(a.hasAttribute('class') == false){
        a.setAttribute('class','');
        console.log(a.outerHTML);
    }

    a.classList.add("clicked");
    console.log(a.outerHTML);
}


JavaScript:
your code:
function setSelected() {
    let a = event.target;
    console.log(a.outerHTML);
    let b = a.parentElement.querySelector(".clicked");
    if(typeof b !== 'undefined' && b !== null){
        console.log(b.outerHTML);
        b.classList.remove("clicked");
        console.log(b.outerHTML)
    };
    if(a.hasAttribute('class') == false){
        a.setAttribute('class','');
        console.log(a.outerHTML)
    };
    a.classList.add("clicked");
    console.log(a.outerHTML)
}
 
The link says, when I use line breaks, I could just as well not use semicolons.
But it also says it's good practice to use them, even when they turn out to be unnecessary, since the worst that can happen is them being ignored.
 
The link says, when I use line breaks, I could just as well not use semicolons.
But it also says it's good practice to use them, even when they turn out to be unnecessary, since the worst that can happen is them being ignored.
Correct, but did you take a look at the examples the article provides?
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom