Javascript function is not working on the first click

Question

I am working in an application where i am using a picture as a link to show hide functionality.But my problem is that whenever i am clicking on the link the hide show functionality is not working at first click ,on second click is it working .How to solve it.Here is my code

<div id="primaryLabel" class="box">
    <div class="bottomBorder">
        <h4>Personal Information</h4>
    </div>
    <a href="#" onclick="open_new();"><img style="border:0;margin-left: 97%;" src="<%=request.getContextPath()%>/images/edit.png" width="20" height="19" title="Click to edit"></a>
    <div class="box-content">
        <table>
            <tr>
                <th><img style="border:0;" src="<%=request.getContextPath()%>/images/home.png" width="20" height="19" title="Address of residence"><span style='color: #FF0000; display: inline;'></span></th>
                <td>
                    <label for="address1" id="address1ForLabel">
                        <%=address1 %>
                    </label>
                </td>
            </tr>
            <tr>
                <th><img style="border:0;" src="<%=request.getContextPath()%>/images/city.png" width="20" height="19" title="City"><span style='color: #FF0000; display: inline;'></span></th>
                <td>
                    <label for="city" id="cityForLabel">
                        <%=city %>
                    </label>
                </td>
            </tr>
            <tr>
                <th><img style="border:0;" src="<%=request.getContextPath()%>/images/phone.jpg" width="20" height="19" title="Primary Phone"><span style='color: #FF0000; display: inline;'></span></th>
                <td>
                    <label for="primary phone" id="primaryPhoneForLabel">
                        <%=primaryPhone %>
                    </label>
                </td>
            </tr>
        </table>
    </div>
</div>

This is the html section i am using plain java script

function open_new() {

    if (document.getElementById('chk').checked == true) {
        document.getElementById('chk').checked = false;
    } else {
        document.getElementById('chk').checked = true;
    }
    if (document.getElementById('chk').checked == true) {
        document.getElementById('contentToShow').style.display = 'block';
        document.getElementById('primaryLabel').style.display = 'none';
    } else {
        document.getElementById('contentToShow').style.display = 'none';
    }
}

the checkbox

this open_new() function is not working after first click ,can anyone help me to solve ???

Answer 1

When you click the image, the href tag first adds an '#' to the url, then the function runs. But by adding a '#' to the url the page refreshes, and the open_new() doesn't load.

• Try changing the href="#" to: href="javascript:open_new()".

• Or remove the anchortags and put the onclick on the image itself.