JAVASCRIPT

[shadow dragon]

i need help with a foreach, i want to only do the div that are directly under the bigger one, not the ones inside

[ionic cosmos]

@amber dragon

rexadelta Uploaded Some Code

Hi can someone help me run this code, I've been trying but its not working.

Uploaded these files to a Gist

message.txt

View The Gist

For safety reasons we do not allow file attachments.

[amber dragon]

copy

[shadow dragon]

ayo???

[left lodge]

This is Men's help channel, create a new post to make your own

[amber dragon]

oh lmao my bad, Men

[shadow dragon]

bro i just need help rn

[amber dragon]

This is a different layout than I'm use too, my apologies

[left lodge]

it happens

[left lodge]

Could you share your code?

[shadow dragon]

ok

how do we do the thing that make you be able to past code?

[left lodge]

!code js

[ionic cosmos]

Code Formatting

When sharing code with the community, please use the correct formatting for ease of readability.

Example

```js
YOUR CODE HERE
```

Those are back ticks not single quotes, typically the key above TAB

[shadow dragon]

monsterDeck.forEach( div => 
    {   //
        div.addEventListener("click", (e) => 
            {   
                console.log(e.target.getAttribute('id'))
            }
        )
    }
)

i know for css you can do < div

but for this instance i cant

[left lodge]

what's monsterDeck?

[shadow dragon]

let monsterDeck = document.querySelectorAll("#monsterDeck > div");

it worked here for the query

[left lodge]

so which one is "the bigger one"?

[shadow dragon]

monster deck

[left lodge]

what does the HTML for that look like

[shadow dragon]

describe or full code

[left lodge]

I guess we only really need #monsterDeck and its contents

[shadow dragon]

ok

<section id="monsterDeck">

            <div id="mons1">
                <h3 id="name1">wefewfwefwef</h3>
                <img id="imgM1" src="img/monster1.png" alt="monstre 1">
                <div id="carteDesc1">
                    wefwefwefwefw
                </div>
                <span> 
                    <img src="img/blade.svg" alt="attack">
                    <div id="attStat1">?</div>
                    <img src="img/sheild.svg" alt="sheild">
                    <div id="shiStat1">?</div>
                    <img src="img/heart.svg" alt="heart">
                    <div id="heaStat1">?</div>
                </span>
            </div>

the div with id="mons1" has 5 copies

*4

so mons 2 3 4 5

all same content

im basically trying to get the number in the id (ill do some trimming) and use some getelementbyid with ${number}

to get the stats

[left lodge]

Wouldn't it be easier to iterate of monsterDeck's children?

that way you can get the elements directly

[shadow dragon]

hmm how would that work (idk)?

[left lodge]

one moment

or better yet, all monsters could have a .monster class

and then you can getElementsByClassName

[shadow dragon]

yeah maybe could have been better but i kinda already used the id in other parts of my code

and im on a time "limit"

like is there any way to translate the < div to the for each

[left lodge]

This is one way to iterate through the direct children of monsterDeck

for (let child of monsterDeck.children) {
    console.log( child.id );
}

[shadow dragon]

thanks

[left lodge]

np

just to clarify, that includes all of its direct children, including other elements like line breaks or paragraphs. So if you have other stuff in there but only want DIV's / things with IDs, you'll have to check the tag name / id before using it

[vernal granite]

So the first snippet is what I already have coded but the second snippet is what I want to recreate using JS does anyone know how I can do this? Adding a percentage viewer to a slider or how would you do it?

[vernal granite]

HTML

        <section>
            <p>Minimal amount of energy from renewable sources such as sun, wind and water.</p>
            <div class="slidecontainer">
                <form action="#">
                    <label for="renewability">
                        <input type="range" name="points" min="0" max="100" value="10" id="renewability">
                    </label>
                </form>
            </div>
        </section>

CSS

/* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}
/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #04AA6D; /* Green background */
    cursor: pointer; /* Cursor on hover */
}
.slider::-moz-range-thumb {
    width: 1.78rem; /* Set a specific slider handle width */
    height: 1.78rem; /* Slider handle height */
    background: #04AA6D; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

JS

function displayRenewabilityPercentage(e) {

}