CODEWITHSUNDEEP
javascript
J. Eng
J. Eng

Reputation: 57

JavaScript validating error

I finally figured out what makes the elements I’ve dubbed ‘folders’ to open and close. The issue is when I run the HTML document through the validator, it says attribute <isfolder="true"> not allowed on div element at this point.

<p></p>
<div class="folderOpenClose" onclick="toggleAllFolders();">Open/Close Folders</div>
<p></p>
<div class="folderlabel" onclick="togglefolder(&#39;folder0&#39;);">Dice Roller</div>
<div id="folder0" class="folder" isfolder="true" style="display: none;">
</div>
<p></p>
<div class="folderlabel" onclick="togglefolder(&#39;folder1&#39;);">Slide Show</div>
<div id="folder1" class="folder" isfolder="true" style="display: none;">
</div>
<p></p>
<div class="folderlabel" onclick="togglefolder(&#39;folder2&#39;);">Carousel</div>
<div id="folder2" class="folder" isfolder="true" style="display: none;">
</div>
<p></p>
<div class="folderlabel" onclick="togglefolder(&#39;folder3&#39;);">Menu Bar</div>
<div id="folder3" class="folder" isfolder="true" style="display: none;">
</div>
<p></p>

The problem with me removing that is it what operates the Open/Close All and when I tried placing the code in the form in the , the Open/Close folder doesn’t work.

    var lastChecked = null;            




function togglefolder(id){ 
    var ele = object(id);
    if(ele.style.display == 'none') ele.style.display='block';
    else ele.style.display = 'none';
}


function setAllFolders(how){
    var way = ""+how;
    if(way == "") way = "none";
    if(way == "closed") way = "none";
    if(way == "open") way = "block";

    var divs = window.document.getElementsByTagName('div');
    for(var i=0; i < divs.length; i++){

        if(divs[i].getAttribute('data-isfolder')&&divs[i].getAttribute('data-isfolder')=='true') 
            divs[i].style.display = way;

        var thisClass = ""+divs[i].getAttribute('class');

        if(thisClass=='folderlabel'){
            var thelabel = ""+divs[i].innerHTML;
            if(thelabel.indexOf('open/close all folders') != -1)
                divs[i].setAttribute('class','folderlabelopen');
        }
    }

    last_toggle=way;
}

Upvotes: 0

Views: 60

Answers (1)

Jeremy J Starcher
Jeremy J Starcher

Reputation: 23863

<div id="folder2" class="folder" isfolder="true" style="display: none;"></div>

isfolder is not a known HTML property, so it is being flagged.

One solution is to use a data-* attribute such as:

<div id="folder2" class="folder" data-isfolder="true" style="display: none;"></div>

Then your code can use:

if(divs[i].getAttribute('data-isfolder') == 'true')

There is also a nifty dataset API that you could use.

More info on data-* properties.

Upvotes: 1

Related Questions