document.style.display not sticking for some reason

问题

EDIT: so I changed the style.display to block and some of them worked. the internal and external textareas are coming back with element not found

Another edit:

In my CSS I had a display:none. When I remove this, it works. But thats no good as the element should only be available after an onclick. Why would setting it to display none stop it from ever being displayed?

I have a simple script here. Basically I wanted to set all the contents of a panel to be invisible (document.style.display ="none") and then after I've gone through all the contents, set one to be visible as indicated by the method.

Javascript:

function showText(divToShow)
{
    var docsToHide = document.getElementsByClassName("full-width");
    for (var i = 0; i<docsToHide.length;i++)
    {
        docsToHide[i].style.display="none";
    }
    var docToShow=document.getElementById(divToShow);
    docToShow.style.display="table";
    console.log(docToShow.style.display);
}

Some notes: full width returns a full list of textAreas in the form of:

[textarea#page-description-textarea.full-width, textarea#keywords-text-area.full-width, textarea#files-textarea.full-width, textarea#internal-links-textarea.full-width, textarea#external-links-textarea.full-width]

At the end of the loop after they've all been set, I set the specified textArea(divToShow).display to be table but yet nothing shows afterwards.

Any ideas? Am i overlooking something?

edit: Added html for textareas

 <div id="text-column">
                    <div id="page-description-text">
                        <textarea id = "page-description-textarea" class="full-width">Page Description</textarea>
                    </div>
                    <div id="keywords-text">
                        <textarea id="keywords-text-area" class="full-width"> Keywords</textarea>
                    </div>
                    <div id="files-text">
                        <textarea id="files-textarea"class="full-width">files</textarea>
                    </div>
                    <div id="internal-links-text">
                        <textarea  id="internal-links-textarea" class="full-width">internal</textarea>
                    </div>
                    <div id="external-links-text">
                        <textarea id="external-links-textarea"class="full-width">external</textarea>
                    </div>
                </div>

One last thing to note is all the textArea elements do set themselves to be invisible. They just don't come back.

回答1:

Are you passing the correct id to your showText() function?

Due to the fact that your variable is named divToShow, I think you are passing the id of the <div> which is correctly setting display:table but you've actually hidden the <textarea> child, which stays hidden.

If you pass the id of the <textarea> instead, the code function works as expected, as in this demo.

来源：https://stackoverflow.com/questions/6832357/document-style-display-not-sticking-for-some-reason

标签

javascript

html

css

hidden