Html Question posted in
Some basic documentation can be found here.

Html – 'querySelectorAll()' returns [object NodeList] instead of actual value

As the title suggests I’m having troubles when trying to get the values of some of my HTML divs in JavaScript.

I have two separate functions and they’re practically written equally, but where in showDiv1, ‘var allCharacters = container.querySelectorAll(‘.planet-waves-container > div’);’ returns an actual list with values, in revealDiv1 it only returns [object NodeList]

Here is a snippet of the HTML:

<div class="planet-waves" id="planet-waves">
                <div class="titulo1">Planet Waves</div>
                <div class="grupo-botoes">
                    <div class="klee-rad" id="klee" name="checkbox1" value="klee" onclick="toggleButton('klee','grupo-botoes'); moveDiv1('klee');"></div>
                    <div class="ayaka-rad" id="ayaka" name="checkbox1" value="ayaka" onclick="toggleButton('ayaka','grupo-botoes'); moveDiv1('ayaka');"></div>
                    <div class="ningguang-rad" id="ningguang" name="checkbox1" value="ningguang" onclick="toggleButton('ningguang','grupo-botoes'); moveDiv1('ningguang');"></div>
                    <div class="zhongli-rad" id="zhongli" name="checkbox1" value="zhongli" onclick="toggleButton('zhongli','grupo-botoes'); moveDiv1('zhongli');"></div>
                </div>
                <div class="planet-waves-container">
                    <div class="klee">
                        <img src="../Dados/Genshin_html_images/Teams/Planet%20Waves/Character_Klee_Full_Wish.png">
                        <div class="klee-bot">
                            <div class="solar" id="solar" name="checkbox1.1" value="solar" onclick="toggleButton('solar','klee-bot'); revealDiv1('solar','klee')"></div>
                            <div class="shim" id="shim" name="checkbox1.1" value="shim" onclick="toggleButton('shim','klee-bot'); revealDiv1('shim','klee')"></div>
                        </div>
                        <div class="klee-textos">
                            <div class="texto-solar">
                                <div class="titulo3">Solar Pearl</div>
                                <div class="corpo-descricao-4">
                                    <p>Base ATK: 510; CRIT Rate 27.6%</p>
                                    <p>Solar Shine: Normal Attack hits increase Elemental Skill and Elemental Burst DMG
                                        by 20~40% for 6s. Likewise, Elemental Skill or Elemental Burst hits increase Normal
                                        Attack DMG by 20~40% for 6s.</p>
                                </div>
                            </div>
                            <div class="texto-shim">
                                <div class="titulo3">Shimenawa's Reminiscence ④</div>
                                <div class="corpo-descricao-4">
                                    <p>2 Piece: ATK +18%</p>
                                    <p>4 Piece: When casting an Elemental Skill, if the character has 15 or more Energy,
                                        they lose 15 Energy and Normal/Charged/Plunging Attack DMG is increased by 50% for
                                        10s. This effect will not trigger again during that duration.</p>
                                </div>
                            </div>
                        </div>
                    </div>

JavaScript function showDiv1():

function moveDiv1(character) {
    console.log("moveDiv1 function called with character: " + character);
    var container = document.querySelector('.planet-waves-container');
    var characterDivImg = container.querySelector('.' + character + ' img');
    var characterDivItems = container.querySelector('.' + character + ' .' + character + '-bot');
    var characterDivItemsDescr = container.querySelector('.' + character + ' .' + character + '-textos');
    var allDivs = container.querySelectorAll('div[class$="-rad"]');
    var allCharacterDivsImg = container.querySelectorAll('.planet-waves-container > div img');
    var allCharacters = container.querySelectorAll('.planet-waves-container > div');
    var allCharacterDivsItems = [];

    allCharacters.forEach(function(character) {
        allCharacterDivsItems.push(container.querySelectorAll('.'+character.classList[0]+' > div'));
    });

    console.log("All characters: ", allCharacters);
    console.log("All character div items: ", allCharacterDivsItems);
    console.log("Character Image: ", characterDivImg);
    console.log("Character Items: ", characterDivItems);

    allCharacterDivsImg.forEach(function(div) {
        console.log("Adding hide2 class to all img elements");
        div.classList.add('hide2');
    });

    for (let i = 0; i < allCharacterDivsItems.length; i++) {
        allCharacterDivsItems[i].forEach(function(div) {
            console.log("Adding hide2 class to div items");
            div.classList.add('hide2');
        });
    }

    characterDivImg.classList.remove('hide2');
    characterDivImg.classList.remove('hide1');
    characterDivItems.classList.remove('hide2');
    characterDivItems.classList.remove('hide1');
    characterDivItemsDescr.classList.remove('hide2');
    characterDivItemsDescr.classList.remove('hide1');

    container.classList.remove('show1');

    setTimeout(function() {
        console.log("Adding show1 class to images and items");
            characterDivImg.classList.add('show1');
            characterDivItems.classList.add('show1');
            characterDivItemsDescr.classList.add('show1');
    }, 0);

    return allCharacters;
}

JavaScript function revealDiv1():

function revealDiv1(item, character) {
    var container = document.querySelector('.planet-waves-container');
    var characterDivItemsDescr = container.querySelector('.' + character + '-textos');
    var itemDescr = characterDivItemsDescr.querySelector('.texto-' + item);
    var allItems = [];
    var allCharacters = container.querySelectorAll('.planet-waves-container > div');
    var allCharacterDivsItems = [];

    console.log("All Characters: " + allCharacters)

    allCharacters.forEach(function(character) {
        allCharacterDivsItems.push(container.querySelectorAll('.'+character.classList[0]+' > div'));
    });


    console.log("All Character Divs Items: " + allCharacterDivsItems)

    console.log('All Items: ' + allItems)

    var allCharacterDivItemsDescr = [];

    console.log('All Character Items Descriptions: ' + allCharacterDivItemsDescr);

    allCharacterDivItemsDescr.forEach(function(div) {
        div.classList.add('vanish');
    });

    itemDescr.classList.remove('vanish');
    container.classList.remove('vanish');

    setTimeout(function() {
        itemDescr.classList.add('reveal');
    }, 500);
}

Thanks in advance for the help!

I already tried practically everything, but I’m kinda working on crunch for uni and haven’t slept well in a while. So I just can’t seem to figure this out.

Tags:

2

Answers


  1. 0

    In your function moveDiv1 your console log statement is console.log("All characters: ", allCharacters);. But in the second function revealDiv1 it’s written console.log("All Characters: " + allCharacters). In the first function there are two different values to be logged in the console. But in the second function you basically concating a string with a variable so the output is different.

    Login or Signup to reply.
  2. 0

    When using the querySelectorAll() method, do note that it gets every DOM element with the provided tag or class name and saves them as a NodeList.

    From current codebase:

    function revealDiv1(item, character) {
    var container = document.querySelector('.planet-waves-container');
    var characterDivItemsDescr = container.querySelector('.' + character + '-textos');
    var itemDescr = characterDivItemsDescr.querySelector('.texto-' + item);
    var allItems = [];
    var allCharacters = container.querySelectorAll('.planet-waves-container > div');
    var allCharacterDivsItems = [];
    ...
}

function revealDiv1(item, character) {
    var container = document.querySelector('.planet-waves-container');
    var characterDivItemsDescr = container.querySelector('.' + character + '-textos');
    var itemDescr = characterDivItemsDescr.querySelector('.texto-' + item);
    var allItems = [];
    var allCharacters = container.querySelectorAll('.planet-waves-container > div');
    var allCharacterDivsItems = [];
    ...
}

    I would first like to advise to keep things DRY(Don’t Repeat Yourself) and make use of the conventional variable keywords let and const

    Something like this:

    const container = document.querySelector('.planet-waves-container');
const allCharacters = container.querySelectorAll('.planet-waves-container > div');

function revealDiv1(item, character) {
    const characterDivItemsDescr = container.querySelector('.' + character + '-textos');
    const itemDescr = characterDivItemsDescr.querySelector('.texto-' + item);
    const allItems = [];
    const allCharacterDivsItems = [];
    ...
}

    Now the issue was that returns a NodeList output on console maybe you should consider saving the element list like this.

    const allCharacterDivsItems = [...allCharacters];

    Spreading the NodeList removes them from the NodeList object, thus if you return the variable holding the […allCharacters] value, then you should get an element list output.

    Hopefully this helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search