DOM元素在更新后立即消失

Question

我有以下javascript函数，可在单击按钮时更新div中的文本（使用onclick（）事件）。它可以工作，但是会立即变回旧文本。

function func()
{
    var text = document.getElementById("text");
    text.innerHTML = "Changed";
};

HTML

<body>
    <form>
        <input type="submit" value="Add Text" onclick="func()"/>
    </form>
    <div id="text">
        Text to Change
    </div>
</body>

我想念什么？ 我也尝试从函数中返回“ false”，但是没有运气。

Answer 1

您实际上是在提交表单。 通过将return false添加到onclick属性来防止这种情况：

<input type="submit" value="Add Text" onclick="func(); return false;"/>

Answer 2

表单提交导致页面刷新并重新加载原始内容。

尝试在表单提交处理程序上返回false，以防止执行默认操作：

<form onsubmit="return false;">

如果我建议，请完全避免内联事件处理程序。 而是将现代事件API与更好的addEventListener ：

<body>
    <form id='mainForm'>
        <input type="submit" value="Add Text"/>
    </form>
    <div id="text">
        Text to Change
    </div>
</body>

Javascript：

var form = document.getElementById("mainForm");
var text = document.getElementById("text"); // probably not a very good id!
form.addEventListener("submit",function(e){ 
    text.innerHTML = "Hello!";
    e.preventDefault();
});

Answer 3

您在Form标记内使用输入type =“ submit”，单击此按钮将刷新同一页面。

尝试

    <input type="button" value="Add Text" onclick="func()"/>

<div id="text">
    Text to Change
</div>

或删除表单标签

DOM元素在更新后立即消失

问题描述

3 个解决方案

解决方案1
8 已采纳 2014-01-21 16:18:49

解决方案2
4 2014-01-21 16:16:39

解决方案3
1 2014-01-21 16:24:23

DOM元素在更新后立即消失

问题描述

3 个解决方案

解决方案1 8 已采纳 2014-01-21 16:18:49

解决方案2 4 2014-01-21 16:16:39

解决方案3 1 2014-01-21 16:24:23

解决方案1
8 已采纳 2014-01-21 16:18:49

解决方案2
4 2014-01-21 16:16:39

解决方案3
1 2014-01-21 16:24:23