使用 textcontent 使用 javascript 將跨度更改為文本

Question

我在 p 標簽中創建了一個空跨度，它應該在單擊按鈕時更改和顯示文本（按鈕 id="clickme"）。 這是我嘗試過的（評論顯示其他嘗試）：

function writeNewMessage() {
   var newMessage = "hello";
   document.getElementById("spanMessage").innerHTML = newMessage;

   //document.getElementById("spanMessage").textContent="You have now finished Task 1";
   //var newMessage = document.getElementById("spanMessage");
   //newMessage.textContent = "You have now finished Task 1";
}

function init() {
   var clickMe = document.getElementById("clickme");
   clickMe.onclick = promptName, writeNewMessage;  
}

<!DOCTYPE html> 
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!--js--> <script src="io.js"></script> 
      <title>Click me</title>
   </head>
   <body>
      <h1>Input and Output using Javascript</h1>
      <p id="message">This is some text in a paragraph</p>
      <p><span id="spanMessage"></span></p>
      <p><button type="button" id="clickme">Click me!</button></p>
   </body>
</html>

Answer 1

您需要實際調用init function 來注冊事件處理程序

 function writeNewMessage() { var newMessage = "hello"; document.getElementById("spanMessage").innerHTML = newMessage; } function init() { document.getElementById("clickme").addEventListener('click',writeNewMessage) } init();

 <h1>Input and Output using Javascript</h1> <p id="message">This is some text in a paragraph</p> <p><span id="spanMessage"></span></p> <p><button id='clickme' type="button">Click me!</button></p>

Answer 2

您需要調用init function 並且可以使用textContent設置文本。

 const button = document.querySelector("#clickme"); const spanMessage = document.querySelector("span#spanMessage"); function init() { button.addEventListener("click", e => { var newMessage = "hello"; spanMessage.textContent = newMessage; }); } init();

 <h1>Input and Output using Javascript</h1> <p id="message">This is some text in a paragraph</p> <p><span id="spanMessage"></span></p> <p><button type="button" id="clickme">Click me!</button></p>

Answer 3

您可以將 onclick() function 添加到按鈕。

 function writeNewMessage() { var newMessage = "hello message text"; document.getElementById("spanMessage").innerHTML = newMessage; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <!--js--> <script src="io.js"></script> <title>Click me</title> </head> <body> <h1>Input and Output using Javascript</h1> <p id="message">This is some text in a paragraph</p> <p><span id="spanMessage"></span></p> <p><button type="button" id="clickme" onclick="writeNewMessage()">Click me!</button></p> </body> </html>

Answer 4

您必須避免過度使用var關鍵字以避免填充全局命名空間。 您應該使用const並將它們封裝在 function 中。 如果您願意，可以使用 Event Bus 系統：

// Event Bus Architecture
window.addEventListener('click', EventBus.bind(this));

function EventBus(event) {
    event.path[0].id === "clickme" ? Register() : null;
}

function Register() {
    const span = document.getElementById("spanMessage")
    span.innerHTML = "Hello World";
}

使用 textcontent 使用 javascript 將跨度更改為文本

問題描述

4 個解決方案

解決方案1
2 2021-04-03 09:21:36

解決方案2
0 2021-04-03 09:20:44

解決方案3
0 2021-04-03 09:21:47

解決方案4
0 2021-04-03 10:02:23

使用 textcontent 使用 javascript 將跨度更改為文本

問題描述

4 個解決方案

解決方案1 2 2021-04-03 09:21:36

解決方案2 0 2021-04-03 09:20:44

解決方案3 0 2021-04-03 09:21:47

解決方案4 0 2021-04-03 10:02:23

解決方案1
2 2021-04-03 09:21:36

解決方案2
0 2021-04-03 09:20:44

解決方案3
0 2021-04-03 09:21:47

解決方案4
0 2021-04-03 10:02:23