0

これはかなり基本的なスクリプトですが、基本的にはクリック時に div を表示し、後でボタンのタイトルをクリックすると div を非表示にします。私は以前にこれを行いましたが、問題なく動作しました。私は自分が何を間違えたのか、または間違っているのかを見つけることができないようです。私が言ったように、最初のものclick()は完全に表示され、2番目のhide()ものは何もしません

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>
4

2 に答える 2

2

ボタンは の子であるtdため、両方の関数が同じクリック イベントで起動されます。

これを に追加hide1():

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

これにより、イベントが DOM をバブリングしてそのtdイベントをトリガーするのを防ぎます。

また、クリック ハンドラーでイベントを渡す必要があります。onClick="hide1(event)"

デモ: http://jsfiddle.net/7PT8U/

于 2013-01-21T07:00:27.900 に答える
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>
于 2013-01-21T07:09:21.627 に答える