DOM元素在更新後立即消失

我有以下javascript函數，當單擊按鈕（使用onclick（）事件）時更新div中的文本它可以工作，但會立即變回舊文本。DOM元素在更新後立即消失

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'，但沒有運氣。

來源

2014-01-21 kassold

實際上，您提交表單。防止通過添加返回false，onclick屬性：

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

來源

2014-01-21 16:18:49 wanten

This Works！爲什麼'返回false'在函數中不起作用？謝謝！ – kassold

@kassold你還需要在函數中做'return func（）'和'return false;'，但這通常比做addEventListener更糟糕。 –

這裏的錯誤或真實意味着什麼？ –

表單提交導致頁面刷新並重新加載原始內容。

嘗試形式返回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(); 
});

來源

2014-01-21 16:16:39

其實，我試過了，但它不工作。我會更新我的問題。 – kassold

謝謝，現在有效 – kassold

您正在使用的輸入類型=「提交」表單標籤中，單擊此按鈕將刷新同一頁面。

嘗試

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

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

或刪除表單標籤

來源

2014-01-21 16:24:23 Piyush

DOM元素在更新後立即消失

回答

相關問題