i would like to be able to click a link and have a form show up. ideally with smoothly maybe use delay? so far i click on the link and nothing happens.
My Javascript
<script type="text/javascript">
function showForm() {
document.getElementById('showme').style.display = "block";
}
</script>
my HTML
<a class="non_link" href="" alt="start a new post" onmouseclick="showForm();">
Start A New Post
</a>
<form action="#" id="showme" method="post">
my CSS
#showme {
font-size: 0.5em;
color: #000;
font-weight: normal;
margin-top: 20px;
display: none;
}
took out the # sign and still doesn't work
i would like to be able to click a link and have a form show up. ideally with smoothly maybe use delay? so far i click on the link and nothing happens.
My Javascript
<script type="text/javascript">
function showForm() {
document.getElementById('showme').style.display = "block";
}
</script>
my HTML
<a class="non_link" href="" alt="start a new post" onmouseclick="showForm();">
Start A New Post
</a>
<form action="#" id="showme" method="post">
my CSS
#showme {
font-size: 0.5em;
color: #000;
font-weight: normal;
margin-top: 20px;
display: none;
}
took out the # sign and still doesn't work
Share Improve this question edited Feb 2, 2012 at 3:47 noWayhome asked Feb 2, 2012 at 3:40 noWayhomenoWayhome 6681 gold badge10 silver badges16 bronze badges4 Answers
Reset to default 3# is not part of the id:
document.getElementById('showme')
Additionally, that should probably be onclick you're using. Plus, try setting the href to something like href="javascript:void(0);" (other expressions that return a falsy value should work too afaik).
Don't use a # sign in getElementById
document.getElementById('showme').style.display = "block";
You want the id, not the selector. See here.
document.getElementById() doesn't need the # .That's a jquery standard kept in line with how you define css ids
See MDN: https://developer.mozilla/en/DOM/document.getElementById
Your code is working in below test HTML file:
<html>
<head>
<style type="text/css">
#showme {
font-size: 0.5em;
color: #000;
font-weight: normal;
margin-top: 20px;
display: none;
}
</style>
<script type="text/javascript">
function showForm() {
document.getElementById('showme').style.display='block';
}
</script>
</head>
<body>
<a class="non_link" href="#" alt="start a new post" onclick="showForm()">
Start A New Post
</a>
<form id="showme" method="">
Content of the Form<br/>
Content of the Form
</form>
</body>
</html>