使用Javascript更改带有按钮的网页上的文本[重复]答案

【问题标题】：Changing text on a web page with buttons using Javascript [duplicate]使用Javascript更改带有按钮的网页上的文本[重复]
【发布时间】：2019-01-01 09:48:18
【问题描述】：

所以我正在尝试创建一个网页功能，您可以在其中输入文本并更改页面上的某些内容。我可以使用具有预先排列文本的按钮并更改它，但是当我使用表单时，它会在不到一秒钟的时间内更改文本，然后恢复为原始文本。将不胜感激一些帮助。下面是我的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;});

不胜感激谢谢

【问题讨论】：

如果不想提交到服务器，就不要使用<form>。
尝试像这样改变js函数 function(){document.getElementById("demo").innerHTML = "Hello World";返回“假”；}。问题是您正在向服务器发帖，并且页面被重绘，因此您丢失了 innerHTML 的本地编辑。添加 return false 将阻止该回发。如果您需要回发，innerHTML 编辑需要在服务器上进行，而不是在本地 js 中。
不要让它成为提交按钮，它不会提交您的表单。将 type="submit" 改为 type="button"
如果你需要那个表格，你可以使用type="button"而不是type="submit"作为按钮

标签： javascript html

【解决方案1】：

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

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

【讨论】：

感谢帮助，找到了一个更简单的解决方案，只需使用按钮类型按钮而不是提交。
当然可以。

【解决方案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>

【讨论】：

您的第二个示例对我来说非常好，感谢您的帮助。
只有一个问题去掉form标签，提交按钮怎么链接到文本框？
@MohammadGhaffar 您可以像之前那样添加一个事件监听器。提交按钮应该附加到整个表单，而不是任何特定的input。
哦，没关系，我只是把自己弄糊涂了。谢谢您的帮助！ :)
@MohammadGhaffar 没问题。