0

このコードを機能させようとしています。変更したいのですが、innerHTMLすぐに変更されて初期状態に戻ります。助けはありますか？

<!DOCTYPE html>
<html>
    <head>
        <script>
            function click_me(){ 
                alert('fdsfs');
                var tweety=document.getElementById('text_this').innerHTML;
                alert(tweety);
                var text_area="<input type=text value='"+tweety+"'>";
                alert(text_area);
                document.getElementById('text_this').innerHTML=text_area; 
             }
        </script>
    </head>
<body>
    <form name="form1">
        <table border=1>
            <tr>
                <td>
                    <div id="text_this">123</div>
                </td>
                <td>
                    <button onclick="click_me();">Edit</button>
                </td>
            </tr>
</body>
</html>
4

2 に答える 2

4

あなたformが提出されています。return false;ボタンonclickイベントに a を追加します。

<button onclick="click_me(); return false;">Edit</button>

または、ボタンを作成しますtype='button'（これがより良いオプションです）

<button onclick="click_me();" type='button'>Edit</button>

その理由は、 a が指定されていない場合、デフォルトでボタンが表示されるtypeためです。submittype

MDNから、

submit: ボタンはフォームデータをサーバーに送信します。これは、属性が指定されていない場合、または属性が空または無効な値に動的に変更された場合のデフォルトです。

于 2013-09-28T12:39:01.597 に答える
1 
<!DOCTYPE html>
<html>
  <head>
    <script>
    function click_me(){ 
      alert('fdsfs');
      var tweety=document.getElementById('text_this').innerHTML;
      alert(tweety);
      var text_area="<input type=text value='"+tweety+"'>";
      alert(text_area);
      document.getElementById('text_this').innerHTML=text_area; 
    }
    </script>
  </head>
  <body>
    <form name="form1">
      <table border=1>
        <tr>
          <td><div id="text_this">123</div></td>
          <td><button onclick="click_me();return false;">Edit</button></td>
        </tr>
      </table>
    </form>
  </body>
</html>

onclick イベントに return false ステートメントを追加しました。それがないと、フォームが送信され、ページがリロードされます

ここでjsfiddle

于 2013-09-28T12:37:06.543 に答える