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事件。

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

或者，制作按钮type='button'（这是更好的选择）

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

原因是如果没有指定typea则submit默认为按钮。type

来自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 回答