2013-01-21 124 views
0

这是一个非常基本的脚本,但基本上即时通过单击显示div,然后在稍后单击按钮标题时隐藏div。我之前做过这件事,它的工作完美无瑕。我似乎不知道我做错了什么,或者做错了什么。就像我说的,第一click()显示完美,第二hide()什么都不做Javascript onclick事件显示但不隐藏

JS:

function click1(){ 
    document.getElementById('form1').style.display='block'; 
} 

function hide1(){ 
    document.getElementById('form1').style.display='none'; 
} 

HTML:

<tbody> 
<tr> 
    <td style="cursor:pointer;" onclick="click1()"> 
    <div id="form1" style="display:none;"> 
    <form action="enter.php" method="post"> 
    <label for="entry1">Entry1</label> 
     <input type="text" id="entry1" name="entry1" size="15" /><br> 
    <label for="entry2">Entry2</label> 
     <input type="text" id="entry2" name="entry2" size="15"/><br> 
    <label for="entry3">Entry3</label> 
     <input type="text" id="entry3" name="entry3" size="15"/><br> 
     <input type="hidden" name="id" value="1" /><br> 
     <input type="hidden" name="table" value="table" /><br> 
     <input type="submit" value="GO!" /> 
     <input type="button" value="later" onClick="hide1()"/> 
    </form> 
    </div><sub>1</sub> 
    </td> 
</tr> 
</tbody> 

回答

2

的按钮是td的孩子这么两个功能是在相同的点击事件中被解雇。

一下添加到hide1()

function hide1(e){ 
    document.getElementById('form1').style.display='none'; 
    e.stopPropagation(); 
} 

这将阻止事件冒泡DOM和触发该事件td

您还需要通过事件单击处理程序:onClick="hide1(event)"

演示:http://jsfiddle.net/7PT8U/

+0

'函数CLICK1(){ 文件。 。的getElementById( 'form1中')的style.display = '块'; (e){ } function hide1 e.stopPropagation(); }' 这是目前的样子。并仍然没有按钮上的功能... – Nick

+0

也改变了onclick到'hide1(event)'好的尝试,但没有骰子 – Nick

+0

看到我的演示.... – AlienWebguy

0

你可以做这样的事情

<tbody> 
<tr> 
    <td style="cursor:pointer;"> 
    <div id="form1" style="display:none;"> 
    <form action="enter.php" method="post"> 
    <label for="entry1">Entry1</label> 
     <input type="text" id="entry1" name="entry1" size="15" /><br> 
    <label for="entry2">Entry2</label> 
     <input type="text" id="entry2" name="entry2" size="15"/><br> 
    <label for="entry3">Entry3</label> 
     <input type="text" id="entry3" name="entry3" size="15"/><br> 
     <input type="hidden" name="id" value="1" /><br> 
     <input type="hidden" name="table" value="table" /><br> 
     <input type="submit" value="GO!" /> 
     <input type="button" value="later" onClick="hide1()"/> 
    </form> 
    </div><sub onclick="click1()">1</sub> 
    </td> 
</tr> 
</tbody>