单击链接时如何在同一页面上显示框

Question

I am making php based web application .I'd like to have a box displayed on the same page when a link is being clicked using java script.How can i achieve this?? I have tried the below code

<script>
function a()
{
    document.getElementsById("a").style.visibility="visible";
}
</script>

<a style="position:absolute;left:84%;top:32%;font-size:13px " href="" onclick="a()">
    Forgot Password?
</a>

<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;visibility:hidden">
</div>

Answer 1

You needed to fix getElementsById isn't plural, should be getElementById

To stop the page reloading on click, set href="javascript:a()"

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<script>
function a()
{
    document.getElementById("a").style.visibility="visible";
}
function close_a()
{
    document.getElementById("a").style.visibility="hidden";
}
</script>

<a style="position:absolute;left:84%;top:32%;font-size:13px " href="javascript:a()">
    Forgot Password?
</a>

<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;visibility:hidden">
<a href="javascript:close_a()"><i class="fa fa-times-circle"></i> Close Me</a>
</div>

added function to close and font awesome

Answer 2

The method of document is wrong.

It should be getElementById , you could use Google chrome DEV tools ( Ctrl + shift + i on windows, ⌘ + option + i on Mac) to debug your code.

Answer 3

Change your code to this and the box will be displayed:

<script>
function a()
{
    document.getElementById("a").style.display="block";
    return false;
}
</script>

<a style="position:absolute;left:84%;top:32%;font-size:13px " href="#" onclick="return a()">
    Forgot Password?
</a>

<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;display: none">
</div>

There was an error in your code. getElementById is correct, and your <a> link refresh the page, correct method to avoid refresh is to change onclick="a();" to onclick="return a();" so that javascript look for return of function, and in function, we return false, therefore keep page same and avoid refresh.

Additionally you can add content to your box:

<script>
function a()
{

    document.getElementById("a").style.display="block";
    document.getElementById("a").innerHTML="<b>your other contents inside the box</b>";
    return false;
}
</script>

<a style="position:absolute;left:84%;top:32%;font-size:13px " href="#" onclick="return a();">
    Forgot Password?
</a>

<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;display: none">
</div>