使用 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