Html 当按钮使用 onclick 创建文本时，使用 onmouseover 突出显示文本

Question

我在用户输入他们的名字后生成文本

我希望能够突出显示 entername() 函数的输出。我可以突出显示文本，但不确定如何针对此指定输出执行此操作？

function entername() {
  var user = document.getElementById("username").value;
  document.body.append("Hey " + user);
}

function overgreeting() {
  document.getElementById("content").style.backgroundColor = "green";
}

<main>

  <input type="string" name="name" id="username">
  <button title="Greet" onclick="entername()">
            Greet
        </button>


  <button onmouseover="overgreeting()"> Test Button </button>
  <p id="content" onmouseover="entername"> </p

</main>

Answer 1

这看起来有用吗？

function entername() {
  var user = document.getElementById("username").value;
  document.querySelector('#content').innerText = "Hey " + user;
}

function overgreeting() {
  document.getElementById("content").style.backgroundColor = "green";
}

<main>
  <input type="string" name="name" id="username">
  <button title="Greet" onclick="entername()">Greet</button>
  <button onmouseover="overgreeting()"> Test Button </button>
  <p id="content"> </p>
</main>

Answer 2

你是这个意思？

function entername() {
  var user = document.getElementById("username").value;
  document.getElementById('content').innerHTML = 'Hey ' + user;
}

function overgreeting() {
  document.getElementById("content").style.backgroundColor = "green";
}

#content {
  background-color: yellow
}

<main>

  <input type="string" name="name" id="username">
  <button title="Greet" onclick="entername()">
            Greet
        </button>


  <button onmouseover="overgreeting()"> Test Button </button>
  <p id="content" onmouseover="entername()"> </p>
</main>

Answer 3

将您要创建和突出显示的文本放在具有自己的 ID 的 <div> 标签中。然后从您的 javascript 代码中通过 id 引用 div 元素，并将背景颜色直接应用于 div 元素。根据结果，您可能希望 div 标签包装内容。

您还可以在 css 中定义 div 背景颜色，并使用按钮管理 div 元素的消失和重新出现。

Html 当按钮使用 onclick 创建文本时，使用 onmouseover 突出显示文本

Html Highlighting text with onmouseover when the text is created by button using onclick

html

javascript

onclick

onmouseover