Question

I am looking to hide a number of DIVs based upon the specific text of another DIV. My Javascript (below) isn’t working.

The HTML:

<div id="LEGEND">abAB</div>

<div id="small-a"></div> 
<div id="small-b"></div> 
<div id="big-a"></div> 
<div id="big-b"></div> 

If the LEGEND DIV contains the text a, then I want it to show only DIV small-a.
If the LEGEND DIV contains the text bA, then I want it to show only DIV small-b and big-a.

The Javascript:

<script>
window.onload = function ShowHide{

    if (document.getElementById('LEGEND').indexOf("a") > 0){
        document.getElementById('small-a').style.display = 'block';}
    if (document.getElementById('LEGEND').indexOf("b") > 0){
        document.getElementById('small-b').style.display = 'block';}
    if (document.getElementById('LEGEND').indexOf("A") > 0){
        document.getElementById('big-a').style.display = 'block';}
    if (document.getElementById('LEGEND').indexOf("a") > 0){
        document.getElementById('big-b').style.display = 'block';}    
</script>

Answer 1

You are forgetting a couple of things.

• A function declaration should be like this

  function functionName(args) {
}

• You have to hide the divs using style.display = “none”

Example:

<div id="LEGEND">abB</div>

<div id="small-a" style="display: none;">This is small-a</div> 
<div id="small-b" style="display: none;">This is small-b</div> 
<div id="big-a" style="display: none;">This is big-a</div> 
<div id="big-b" style="display: none;">This is big-b</div>

<script>
function showElement(id) {
    document.getElementById(id).style.display = "block";
}

window.onload = function ShowHide() {
    var legend = document.getElementById("LEGEND").innerHTML;

    if(legend.indexOf("a") != -1) showElement("small-a");
    if(legend.indexOf("b") != -1) showElement("small-b");
    if(legend.indexOf("A") != -1) showElement("big-a");
    if(legend.indexOf("B") != -1) showElement("big-b");
}
</script>