當使用 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>標簽中。 然后通過 id 從您的 javascript 代碼中引用 div 元素，並將背景顏色直接應用於 div 元素。 根據結果​​如何，您可能希望 div 標簽包裝內容。

您還可以在 css 中定義 div 背景顏色，並使用按鈕管理 div 元素的消失和重新出現。