Question

I have the following code in an html page:

<script type="text/javascript">      
    function industry(industryid)
    {
        if(industryid==0)
        {
            document.getElementById("SubIndustry").style.visibility="Hidden";
        }
        else
        {
            document.getElementById("SubIndustry").style.visibility="Visible";
        }
    }
</script>

This code is used here:

<div class="Question">
             2. What is the primary nature of your business?
        </div>

        <div class="Answer">
            <input type="radio" name="q2" class="Button" value="1-1" onchange='industry(0)' />
            Manufacturing/Logistics
            <br />
            <input type="radio" name="q2" class="Button" value="1-2" onchange='industry(0)' />
            Government/Schools
            <br />
            <input type="radio" name="q2" class="Button" value="1-3" onchange='industry(1)' />
            Commercial/Service/Medical/Retail/Other
        </div>

        <div id="SubIndustry">
            <div class="Question">
                Services Sub Industry
            </div>

            <div class="Answer">
                <input type="radio" name="q2-1" class="Button" value="135-55" />
                Healthcare
                <br />
                <input type="radio" name="q2-1" class="Button" value="135-56" />
                Other
            </div>

        </div>

Essentially this is what is supposed to happen: the SubIndustry div starts out invisible, and when someone selects the third industry option “Commercial/Service/Medical/Retail/Other” then the SubIndustry div appears. If they click off of the third industry it disappears.

This is how it’s working in Firefox, but in IE8 it’s not. It’s acting like it’s a “turn” behind. so when I click on the third industry, nothing happens, but if i click of then SubIndustry shows up. If I then click away it disappears again.

So, why is this working different in IE8 than Firefox?

Answer 1

I think it must be some bug because once you select the third option it is not making div visible but the very time you click outside somewhere else the div shows up!!!!!

I have modified the code and it works:-

<div class="Answer">
    <input type="radio" name="q2" class="Button" value="1-1" onclick="industry(0)" />
    Manufacturing/Logistics
    <br />
    <input type="radio" name="q2" class="Button" value="1-2" onclick="industry(0)" />
    Government/Schools
    <br />
    <input type="radio" name="q2" class="Button" value="1-3" onclick="industry(1)" />
    Commercial/Service/Medical/Retail/Other
</div>