DOM元素在更新后立即消失答案

【问题标题】：DOM element disappearing immediately after updateDOM元素在更新后立即消失
【发布时间】：2014-02-11 08:36:59
【问题描述】：

我有以下 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”，但没有成功。

【问题讨论】：

标签： javascript html

【解决方案1】：

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

尝试在表单提交处理程序上返回 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();
});

【讨论】：

其实我试过了，但是不行。我会更新我的问题。

【解决方案2】：

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

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

【讨论】：

这行得通！为什么'return false'在函数中不起作用？谢谢！
@kassold 您还需要在函数中执行 return func() 和 return false;，但这通常比执行 addEventListener 更糟糕。
这里的值 false 或 true 是什么意思？

【解决方案3】：

您在表单标签中使用 input type="submit" ，单击此按钮将刷新同一页面。

试试

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

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

或删除表单标签

【讨论】：