Question

也许是一个愚蠢的问题，但我不知道这种奇怪的javascript行为的根本原因：我的“提交按钮”调用了“ javascript函数”，更新html字段（确定），然后将其删除（否）！为什么执行后会删除“演示”字段？（也许这是有史以来最简单的stackoverflow问题之一！）

<!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>

Answer 1

JavaScript不会清除该值...后续发回表单会清除。您将type="submit"放在按钮中，该按钮会将表单提交到服务器。然后，这导致服务器将HTML页面的新副本发送回供浏览器使用。当然，新副本不包含JavaScript所做的任何更改，因为这些更改仅存在于浏览器的页面旧副本中，该旧副本现已被销毁。

您可以将其更改为type="button"，并且不会回发该表单。如果您实际上不需要此处的表单，请同时删除<form></form>标签。

以下是有关表格的一些有用的背景知识：https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms

Answer 2

这是因为您的按钮类型设置为submit。将其设置为button会将值保留在屏幕上。

Answer 3

单击提交按钮时，它提交了表单。然后您会看到一个新的空白页。

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

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

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

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

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

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

</body>
</html>

jQuery版本：

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <head></head>
<body>

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

<form>
  <button id="the-button">Submit</button>
</form>

<script type="text/javascript">
    $('#the-button').on('click', function() {
        $('#demo').text('hello world');
        return false;
    });
</script>

</body>
</html>

Answer 4

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

请注意：

未提供操作时，html表单将始终提交事件。当您提交而没有操作时，它将提交到同一页面，更多就像重新加载，但内存中有表单数据。

这是解决问题的方法：

function launchSubmit(event){
    event.preventDefault();
    document.getElementById("demo").innerHTML = "bla bla bla"; 
}

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

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

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

4 个答案: