Fatal编程技术网
  • javascript/
  • Javascript函数更新html字段，然后将其删除

Javascript函数更新html字段，然后将其删除

javascript html

Javascript函数更新html字段，然后将其删除,javascript,html,Javascript,Html,也许是一个愚蠢的问题，但我不知道这种奇怪的javascript行为的根本原因：我的“提交按钮”调用一个“javascript函数”，该函数 更新一个html字段（ok），然后删除它（nok）！ 为什么“演示”字段在执行后被擦除？？ （可能是史上最简单的stackoverflow问题之一！） 提交 函数启动提交（）{ document.getElementById（“demo”）.innerHTML=“bla-bla-bla”； } JavaScript不会删除值。。。您的表单的后续回发不需要

也许是一个愚蠢的问题，但我不知道这种奇怪的javascript行为的根本原因：我的“提交按钮”调用一个“javascript函数”，该函数 更新一个html字段（ok），然后删除它（nok）！ 为什么“演示”字段在执行后被擦除？？ （可能是史上最简单的stackoverflow问题之一！）




提交
函数启动提交（）{
document.getElementById（“demo”）.innerHTML=“bla-bla-bla”；
}
JavaScript不会删除值。。。您的表单的后续回发不需要。您将
type=“submit”
放入将表单提交到服务器的按钮中。这将导致服务器发回HTML页面的新副本供浏览器使用。当然，新副本不包含JavaScript所做的任何更改，因为这些更改只存在于浏览器的页面旧副本中，现在已被销毁

您可以将其更改为
type=“button”
，它不会发回表单。如果您实际上不需要表单，请删除
标记

下面是一些关于表单的有用背景资料：

这是因为您的按钮类型设置为
submit
。将此设置为
按钮将在屏幕上保留该值。
当您单击提交按钮时，它将提交表单。然后你会看到一个新的空白页面

您应该将
return false
添加到
onclick
事件中，或者您可以将
type=submit
属性更改为
type=button
，以创建一个普通按钮

使用内联
onclick
是一个坏主意，如果您不注意转义/返回等，可能会导致错误，您最好使用一些库，如
jQuery
，它将帮助您更多






提交
函数启动提交（）{
document.getElementById（“demo”）.innerHTML=“bla-bla-bla”；
}

因为您的表单更新了该元素，然后提交。为了保留该元素，您必须阻止表单提交

请注意:

未提供操作时，html表单将始终提交事件。
当您提交而不执行操作时，它将提交到同一页面，更多信息
类似于重新加载，但在内存中有表单数据

这就是你解决问题的方法：

函数启动提交（事件）{
event.preventDefault（）；
document.getElementById（“demo”）.innerHTML=“bla-bla-bla”；
}



提交

jQuery如何帮助解决这个非常简单的问题？这是一个完全无关的观点。（我喜欢jQuery，但它与这个问题无关）@ADyson我已经在第一段中回答了你的问题，并根据你的问题给你举了一个例子。使用inline
onclick
是个坏主意，如果你不注意逃逸/返回等，可能会导致错误。你似乎把我错当成了问问题的人……仔细看看你的身份证在与.P.S.对话时，您不需要转向jQuery来删除内联的“onclick”“处理程序等
文档。addEventListener
将完成此工作，无需第三方代码。jQuery不是一个框架，它只是一个库。人们建议不要使用内联事件处理程序的原因并不是担心bug……分离关注点/更好的可维护性是动机。此外，您还可以在函数中使用
event.preventDefault（）
，这样它就不会提交表单。@Refilon true，但是，当您可以只使用HTML本身的属性时，为什么还要使用额外的代码呢？有时人们无法编辑HTML，因此删除表单可能是不可能的。然后
事件.preventDefault（）
将完成这项任务。另外，如果您需要jQuery中的表单数据，这将是最好的方法。@ADyson我认为这真的不重要。这完全取决于您的喜好。@Refilon“如果您需要jQuery中的表单数据，这将是最好的方式”…无论您使用按钮类型、preventDefault、ReturnFalse还是其他任何方式，都不会有任何区别。

<!DOCTYPE html>
<html>
  <head></head>
<body>

<p id="demo"></p>

<form>
  <button type="submit" value="Submit"
          onClick="launchSubmit()">Submit
  </button>
</form>

<script type="text/javascript">
    function launchSubmit(){
            document.getElementById("demo").innerHTML = "bla bla bla"; 
    }
</script>

</body>
</html>