JavaScript validating error

Question

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;
}

Could you please pare your code down to the minimal amount you're asking about? Take a look at minimal reproducible example. — Heretic Monkey
– Heretic Monkey, Commented Feb 23, 2016 at 21:48

Jeremy J Starcher · Accepted Answer · 2016-02-23 21:51:38Z

1

<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.

answered Feb 23, 2016 at 21:51

Jeremy J Starcher

24k6 gold badges56 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

J. Eng Over a year ago

Sorry Jeremy. I placed the 'data' where you showed me and it doesn't work.

Jeremy J Starcher Over a year ago

Did you update all your references to getAttribute? There are a number in your code.

J. Eng Over a year ago

Oh! Where do I do that? In the head or in the JavaScript code? I do apologize, but I didn't see that at first.

J. Eng Over a year ago

Apologies once again but where would I put it in the JS code?

Jeremy J Starcher Over a year ago

replace all instances of getAttribute('isfolder') with getAttribute('data-isfolder').

|

Collectives™ on Stack Overflow

JavaScript validating error

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related