Javascript输出错误

Javascript output error

本文关键字：错误 输出 Javascript      更新时间：2023-09-26

我在Javascript中输出文本到div时遇到麻烦。当我调用按钮点击函数时，它显示文本几分之一秒，然后消失。为什么会这样呢?代码如下:

代码: 

function val(){
        var x = document.getElementById('us').value
        document.getElementById("demo").innerHTML = x;
}
HTML: 

<form method="post">
   <p id="demo"></p>
   <br />
   <input type="text" id="us" name="username"></input>
   <br />           
   <button type="submit" onclick="val()">Sign Up</button>
</form>

<form method="post">
   <p id="demo"></p>
   <br />
   <input type="text" id="us" name="username"></input>
   <br />           
   <button type="button" id="asd">Sign Up</button>
</form>
$('#asd').click(function () {
    var x = document.getElementById('us').value
        document.getElementById("demo").innerHTML = x;
});

小提琴

我做了一些改变。我将按钮类型从submit更改为button，还添加了id for the button。检查

表单中有一个提交按钮，它的默认动作是提交表单，这就是为什么结果会消失(页面正在刷新)

由于您真的不想提交表单(这里您只是对页面进行一些动态更改)，一个简单的解决方案是将按钮的类型更改为button 

function val() {
  var x = document.getElementById('us').value
  document.getElementById("demo").innerHTML = x;
}
<form method="post">
  <p id="demo"></p>
  <br />
  <input type="text" id="us" name="username"></input>
  <br />
  <button type="button" onclick="val()">Sign Up</button>
</form>

另一个解决方案是通过返回false

来防止提交按钮单击的默认操作

试试这个:

您的代码工作如预期，但由于您已采取按钮类型为submit，它提交表单。

function val() {
  var x = document.getElementById('us').value
  document.getElementById("demo").innerHTML = x;
}
<form method="post">
  <p id="demo"></p>
  <br />
  <input type="text" id="us" name="username"></input>
  <br />
  <button type="button" onclick="val()">Sign Up</button>
</form>

相关文章：