Question

我正在尝试使这段代码正常工作，我想要更改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>

Answer 1

您的form已提交。在按钮return false;事件中添加onclick。

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

或者，按下按钮type='button'（这是更好选项）

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

原因是，如果type 未指定，则默认情况下按钮submit为type。

来自MDN，

提交：按钮将表单数据提交给服务器。这是如果未指定属性，或者属性为，则为default 动态更改为空值或无效值。

Answer 2

<!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事件中添加了一个返回false语句。没有它，表单会被提交并且页面会重新加载

jsfiddle here

innerHTML javascript正在改变

2 个答案: