Question

因此，我正在尝试创建一个网页功能，您可以在其中输入文本，它会更改页面上的某些内容。我可以使用具有预先安排的文本的按钮，并且可以对其进行更改，但是当我使用表单时，它会在不到一秒钟的时间内更改文本，然后还原为原始文本。希望能有所帮助。下面是我的html和js文件。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="CS_Site_Index.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="CS_Site_Index.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

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

<button id="ButtonText"> Click Here To Change The Text</button>
<button id="ButtonText2"> Click Here To Change The Text Back</button>

<br>

<form>
  Change The Text<br>
  <input id="text1" type="text"><br>
  <br>
  <input id="ButtonTextSubmit" type="submit" value="Submit">
</form>

<script type="text/javascript" src="changetext.js"></script>
</body>
</html>

这是我的js文件

document.getElementById("ButtonText").addEventListener("click", function(){document.getElementById("demo").innerHTML = "Hello World";});

document.getElementById("ButtonText2").addEventListener("click", function(){document.getElementById("demo").innerHTML = "Hi";});

document.getElementById("ButtonTextSubmit").addEventListener("click", function(){document.getElementById("demo").innerHTML = document.getElementById("text1").value;});

将感谢您的帮助谢谢

Answer 1

您的页面正在刷新。您可以通过向表单提交处理程序中添加e.preventDefault()来防止这种情况，如下所示：

document.getElementById("ButtonTextSubmit").addEventListener("click", e => {
    e.preventDefault(); // prevent refresh
    document.getElementById("demo").innerHTML = document.getElementById("text1").value;
  }
);

Answer 2

您可以使用event.preventDefault()阻止表单提交。

document.getElementById("ButtonText").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";});

document.getElementById("ButtonText2").addEventListener("click", function(){document.getElementById("demo").innerHTML = "Hi";});

document.getElementById("ButtonTextSubmit").addEventListener("click", function(){
event.preventDefault();
document.getElementById("demo").innerHTML = document.getElementById("text1").value;});

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="CS_Site_Index.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="CS_Site_Index.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<p id="demo"> hi</p>

<button id="ButtonText"> Click Here To Change The Text</button>
<button id="ButtonText2"> Click Here To Change The Text Back</button>

<br>

<form>
  Change The Text<br>
  <input id="text1" type="text"><br>
  <br>
  <input id="ButtonTextSubmit" type="submit" value="Submit">
</form>

<script type="text/javascript" src="changetext.js"></script>
</body>
</html>

或者，您可以将#ButtonTextSubmit更改为按钮而不是提交按钮，因为按下后，提交按钮将自动提交表单。

document.getElementById("ButtonText").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";});

    document.getElementById("ButtonText2").addEventListener("click", function(){document.getElementById("demo").innerHTML = "Hi";});

    document.getElementById("ButtonTextSubmit").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = document.getElementById("text1").value;});

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="CS_Site_Index.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script type="text/javascript" src="CS_Site_Index.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>
    <body>

    <p id="demo"> hi</p>

    <button id="ButtonText"> Click Here To Change The Text</button>
    <button id="ButtonText2"> Click Here To Change The Text Back</button>

    <br>

    <form>
      Change The Text<br>
      <input id="text1" type="text"><br>
      <br>
      <input id="ButtonTextSubmit" type="button" value="Submit">
    </form>

    <script type="text/javascript" src="changetext.js"></script>
    </body>
    </html>

如果您不希望将表单提交到服务器，则完全不需要表单。

document.getElementById("ButtonText").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";});

document.getElementById("ButtonText2").addEventListener("click", function(){document.getElementById("demo").innerHTML = "Hi";});

document.getElementById("ButtonTextSubmit").addEventListener("click", function(){
document.getElementById("demo").innerHTML = document.getElementById("text1").value;});

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="CS_Site_Index.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="CS_Site_Index.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<p id="demo"> hi</p>

<button id="ButtonText"> Click Here To Change The Text</button>
<button id="ButtonText2"> Click Here To Change The Text Back</button>

<br>

<!--removed form tag-->
  Change The Text<br>
  <input id="text1" type="text"><br>
  <br>
  <input id="ButtonTextSubmit" type="button" value="Submit">


<script type="text/javascript" src="changetext.js"></script>
</body>
</html>

使用Javascript

2 个答案: