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元素在更新后立即消失

回答

相关问题