HTML 和 JS：如何在 div 中使用 textContent 在单击按钮后显示文本而不让文本快速消失？ [复制]

Posted 2023-02-22

技术标签:

【中文标题】HTML 和 JS：如何在 div 中使用 textContent 在单击按钮后显示文本而不让文本快速消失？ [复制]【英文标题】：HTML and JS: How do I use textContent in a div to display text after clicking a button without having the text disappear quickly? [duplicate] 【发布时间】：2021-06-21 18:56:37 【问题描述】：

我想在点击按钮后通过DOM方法在一个div中显示剪刀石头布游戏的结果。

然而，在点击一个选择的按钮后，像“You Win！rock beatscissors”这样的文字只会显示很短的时间。如何让结果保持显示？

我目前正在使用 textContent。但是，当我尝试使用 innerhtml 时，单击按钮后文本根本不显示。

html

<html>
<head>
  <title>Page Title</title>
  <meta charset="UTF-8"/>
</head>
<body>
  <form> 
    <button id="rockBtn">Rock</button>
  </form> 
  <div id="results"></div>
  </body>
<script src="main.js"></script>
</html>

javascript

let playerSelection;

function computerPlay(choices =["rock", "paper", "scissors"]) 
  const randomIndex = Math.floor(Math.random() * choices.length);
  const randomReturn = choices[randomIndex];
  return randomReturn;


let computerSelection = computerPlay();

function playRound(playerSelection, computerSelection) 
  computerSelection = computerPlay();

  if (playerSelection.toLowerCase() === "rock") 
    if (computerSelection === "paper") 
      let resultText = "You Lose! " + computerSelection + " beats " + playerSelection;
      computerScore++;
      document.getElementById("results").textContent = resultText;
   else if (computerSelection === "scissors") 
      let resultText = "You Win! " + playerSelection + " beats " + computerSelection;
      playerScore++;
      console.log(resultText);
      document.getElementById("results").textContent = resultText;
   else if (computerSelection === "rock") 
      let resultText = "It's a draw! " + playerSelection + " and " + computerSelection;
      console.log(resultText);
      document.getElementById("results").textContent = resultText;
  


document.getElementById("rockBtn").addEventListener("click", function()
  playRound("rock", computerSelection);
);

【问题讨论】：

您的代码似乎缺少条件语句上的一些闭包...但您始终可以创建一个 setTimeout() 来显示您的文本... 编辑并在 js sn-p 中添加了右大括号。谢谢你让我注意到这一点。我可以试试 setTimeout()。 【参考方案1】：

您需要阻止表单提交...将事件传递给您的侦听器，然后...e.preventDefault()

document.getElementById("rockBtn").addEventListener("click", function(e)
  playRound("rock", computerSelection);
  e.preventDefault()
);

现在您的表单提交页面，默认情况下它正在刷新，因此您的消息被删除... 在这里阅读更多：e.preventDefault() on MDN

【讨论】：

【参考方案2】：

在您的 eventListener 回调中，接收事件对象作为参数并禁用默认的“表单提交”行为。

// note the "e" inside the callback function parameter

document.getElementById("rockBtn").addEventListener("click", function(e)
  e.preventDefault(); // prevent the form from being submitted(the cause for text disappearing immediately)
  playRound("rock", computerSelection);
);

【讨论】：

以上是关于HTML 和 JS：如何在 div 中使用 textContent 在单击按钮后显示文本而不让文本快速消失？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章

js如何在本页面div中输出内容而不跳转?