JavaScript function does not work

0

I have a function that works on my test done in Notepad, but the project does not work.

<head>
    <script type="text/javascript">

        function MostrarEsconderDiv(div) {

            if (document.getElementById(div).style.display == "none") { <---AQUI DA ERRO --->
                document.getElementById(div).style.display = "block";
                document.getElementById(div).value = "aberta";
            }
            else {
                document.getElementById(div).style.display = "none";
                document.getElementById(div).value = "";
            }
        }
    </script>

</head>

<body>
<table>
                               <tr>
                        <td colspan="3" height="10">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" valign="top">
                            <div class="Section">
                                <div class="SectionHeader">
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                        <tr>
                                            <td>
                                                <img align="absMiddle" hspace="4" src="/images/internas/seta3.gif" />
                                                <a id="A3" class="linkFormularios" href="javascript:MostrarEsconderDiv('divSecao6')">Para Sistema Integrado de Gestão, clique aqui</a>
                                                <br />
                                                (abrirá um formulário nesta mesma página para você preencher)
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div id="spacer" style="margin-top: 5px">
                                </div>
                                <div id="divSecao6" style="display:none;  margin-left: 30px" runat="server">
                                    <table id="idSecao6Table" width="100%">
                                        <!-- SECAO 6 -->
                                        <tr>
                                            <td height="15">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center" bgcolor="#ececec" height="21">
                                                <b>6 - Apenas para Sistema Integrado de Gestão</b>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td bgcolor="#cccccc" height="1">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="5">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center" bgcolor="#f5f5f5">
                                                Responda a esta seção apenas se você estiver interessado em uma certificação integrada (opcional).
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="5">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <font color="#666666"><b>A Política e o Manual do Sistema de Gestão são integrados?</b></font>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <asp:RadioButtonList ID="rblPoliticaManualSistemaIntegrados" runat="server" RepeatDirection="Horizontal">
                                                    <asp:ListItem Value="Sim" Text="Sim"></asp:ListItem>
                                                    <asp:ListItem Value="Não" Text="Não"></asp:ListItem>
                                                </asp:RadioButtonList>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="5">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td bgcolor="#cccccc" height="1">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="5">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <font color="#666666"><b>Os procedimentos de gestão (ex: Controle Documentos, Auditorias) são integrados?</b></font>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <asp:RadioButtonList ID="rblProcGestaoIntegrados" runat="server" RepeatDirection="Horizontal">
                                                    <asp:ListItem Value="Sim" Text="Sim, pelo menos 80% dos procedimentos de gestão são integrados"></asp:ListItem>
                                                    <asp:ListItem Value="Não" Text="Não"></asp:ListItem>
                                                </asp:RadioButtonList>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="5">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td bgcolor="#cccccc" height="1">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="5">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <font color="#666666"><b>Os procedimentos operacionais (ex: Controle de produção) são integrados?</b></font>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <asp:RadioButtonList ID="rblProcOperacionaisIntegrados" runat="server" RepeatDirection="Horizontal">
                                                    <asp:ListItem Value="Sim" Text="Sim, pelo menos 80% dos procedimentos operacionais são integrados"></asp:ListItem>
                                                    <asp:ListItem Value="Não" Text="Não"></asp:ListItem>
                                                </asp:RadioButtonList>
                                            </td>
                                        </tr>
                                        <!-- FIM - ESCONDE SEÇÃO 6  -->
                                    </table>
                                </div>
                            </div>
                        </td>
                    </tr>

    
asked by anonymous 21.07.2015 / 15:31

4 answers

1

I noticed that you are using ASP.NET Web Forms, right? The ID of some elements is changed at run time, this may be causing the problem. For example, put a alert(div) inside the function to see if the ID is being passed as expected and inspect the element in the browser to see if it has the same ID.

    
21.07.2015 / 16:07
1

As I said in the other answer, your error happens because in your element there is no defined display attribute.

getElementById(div).style.display == "none"

What this line of code means:

"Compare the display attribute of the element with that ID and compare with none"

Since the display attribute does not exist in the definition of its element, the error is generated.

Correction

Edit the HTML element called by the function and add style="display:none"

For example:

If your element was:

<div id="seuDiv"></div>

it should stay:

<div id="seuDiv" style="display:none"></div>
    
21.07.2015 / 15:38
0

Try changing:

<a id="A3" class="linkFormularios" href="javascript:MostrarEsconderDiv('divSecao6')">Para Sistema Integrado de Gestão, clique aqui</a>

By

<span id="A3" class="linkFormularios" onclick="MostrarEsconderDiv('divSecao6')">Para Sistema Integrado de Gestão, clique aqui</span>

Some applications often bug when we use the link tag ...

Edited: The div is running on the server and the script is running on the client side, follow comments

    
21.07.2015 / 20:36
0

I was able to put ClientIDMode="Static" in the element where I needed to get the ID and pass it as a parameter to the function.

    
21.07.2015 / 21:31