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

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

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

Answer 2

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

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

<form onsubmit="return false;">

如果我建议，请完全避免使用内联事件处理程序。而是使用具有更好的addEventListener：

的现代事件API

<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标签中使用input type =“submit”，单击此按钮将刷新同一页面。

尝试

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

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

或删除表单标记

DOM元素在更新后立即消失

3 个答案: