html 为什么我的Javascript代码运行后立即消失

agxfikkp 于 2022-11-20 发布在 Java

关注(0)|答案(2)|浏览(223)

我写了下面的代码，当用户输入他们的名字时，显示用户的名字。但是名字会立即出现和消失。这是什么问题？
html代码

<div>
   <p id="names"></p>
</div>

<form method = "get" action = "">
   Enter first name: <input type = "text" id = "firstName"/>
   Enter last name: <input type = "text" id = "lastName"/>
   <input type = "submit" value = "submit" onclick = "return firstName_lastName();"/>
</form>

Javascript程式码

function firstName_lastName() {
   var firstName = document.getElementById('firstName').value;
   var lastName = document.getElementById('lastName').value;
   var names = document.getElementById('names');

  if (firstName == "" || lastName == "") {
   alert('Please fill in all the fields');
   return false; 
  } else {
    names.innerHTML = firstName + " " + lastName; 
   return true; 
}

代码可以正常工作，但名称会立即显示和消失。
编辑：代码运行，但当点击提交按钮时，输入的名字和姓氏会出现在浏览器上，并立即消失。当任何一个或两个字段都没有填写时，警告也会很好地工作。

Html

来源：https://stackoverflow.com/questions/69336712/why-does-my-javascript-code-runs-and-disappear-immediately

2条答案

按热度按时间

doinxwow1#

提交按钮基本上是将表单提交到服务器并在单击时重新加载页面，但是如果您希望在提交之前进行验证，则可以使用preventDefault来停止页面重新加载，请参见下面的示例
第一个

赞(0）回复(0）举报 2022-11-20

toiithl62#

function firstName_lastName(e) {
    e.preventDefault() // to stop submit
    var firstName = document.getElementById('firstName').value;
    var lastName = document.getElementById('lastName').value;
    var names = document.getElementById('names');

    if (firstName == "" || lastName == "") {
        alert('Please fill in all the fields');
    }
    names.innerText = `${firstName} ${lastName}` 
}

preventDefault（）方法会取消可取消的事件，表示属于该事件的预设动作不会发生。
例如，这在以下情况下非常有用：
点击“提交”按钮，防止其提交表单点击链接，防止链接跟随URL注意：并非所有事件都是可取消的。请使用cancelable属性来找出事件是否可取消。
注意：preventDefault（）方法不会防止事件透过DOM进一步传播。请使用stopPropagation（）方法来行程此问题。

赞(0）回复(0）举报 2022-11-20

我来回答

html 为什么我的Javascript代码运行后立即消失

2条答案

相关问题

热门标签

最新问答