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