CODEWITHSUNDEEP
javascriptdom
Jon M
Jon M

Reputation: 1

Can someone explain how this function is working?

So what I'm doing is creating a site that displays information about a person when you click a button. The information is displayed in a text box on a part of the page, and you can click the "Info" button next to the person's name to make the content appear in the text box. The issue I was having was that I couldn't get the content to disappear when I clicked the second "Info" button to get the other person's information to show up. I understand that a function had to be created to change the "display" property to "block" from "none." I understand the first two statements of the function, but once it gets to the "if...return" statement, I don't understand what's going on. Any help in explaining this would be great!

Thanks! 

function resetBioVisi()
{
    var bioElem = document.getElementById("bio");
    var bios = bioElem.childNodes;
    if (bios.length == 0) return;
    for (var index = 0; index < bios.length; index++)
        if (bios[index].style !== undefined)
                bios[index].style.display="none";
}

Upvotes: 0

Views: 59

Answers (3)

Luis Martin
Luis Martin

Reputation: 973

There are people who came earlier, but anyway this might help you understand it even more:

function resetBioVisi()
{
    // Get the bio element
    var bioElem = document.getElementById("bio");
    
    // Get all the bio element's children
    var bios = bioElem.childNodes;
    
    // If there are no bio children, return since there's nothing to do
    if (bios.length == 0) return;
    
    // Else, loop through them and set their display style to none so they will not be rendered.
    for (var index = 0; index < bios.length; index++)
        if (bios[index].style !== undefined)
                bios[index].style.display="none";
}

var button = document.getElementsByTagName('button')[0];
button.addEventListener('click', resetBioVisi);
<div id="bio">
    <p>Bio 1</p>
    <p>Bio 2</p>
    <p>Bio 3</p>
</div>
<button>Hide bios</button>

Upvotes: 0

Cereal
Cereal

Reputation: 3849

function resetBioVisi() is the function declaration. This is the function name and any parameters.

var bioElem = document.getElementById("bio"); Gets the element with the id "bio" from the dom.

var bios = bioElem.childNodes; Gets all child nodes of bioElem.

if (bios.length == 0) return; If bioElem has no children, leave the function immediately and do not continue. The for loop would not run in that case.

for (var index = 0; index < bios.length; index++) This is a loop. You defined an indexing variable (in this case, index), a stopping condition, and an iterator. This says "perform the following actions for all children of bioElem.

if (bios[index].style !== undefined) Check the style of the current child node. If it is not defined, enter the block. If it is defined, do not enter the block. bios[index] is saying "Give me the child from bios at index position. !== is saying "If left-hand-side does not equal type or value of undefined".

bios[index].style.display="none". This is inside the above condition, so we know bios[index].style is undefined. We set the display style to 'hidden' to hide it from the user's view.

I'll rewrite it in a way that might make more sense to you:

function resetBioVisi() {
    var bioElem = document.getElementById("bio");
    var bios = bioElem.childNodes;

    for (var index = 0; index < bios.length; index++) {
        if (bios[index].style !== undefined) {
            bios[index].style.display="none";
        }
    }
}

Upvotes: 0

Jesse
Jesse

Reputation: 1262

function resetBioVisi()
{
    //get bio element by id
    var bioElem = document.getElementById("bio");

    //get all child elements of bios
    var bios = bioElem.childNodes;

     //if there are no child elements, do nothing (exit function)
    if (bios.length == 0) return;

     //otherwise, for each element in the list of bios's child elements...
    for (var index = 0; index < bios.length; index++)

        //if the element has a style
        if (bios[index].style !== undefined)

                //set that style to none (make it hidden)
                bios[index].style.display="none";
}

Upvotes: 1

Related Questions