使用 textcontent 使用 javascript 将跨度更改为文本
[英]changing span to text with javascript using textcontent
问题描述
I created an empty span within p tags which is supposed to change and reveal text when the button is clicked (button id="clickme").
我在 p 标签中创建了一个空跨度，它应该在单击按钮时更改和显示文本（按钮 id="clickme"）。 Here is what I have tried (comments show other attempts):这是我尝试过的（评论显示其他尝试）：
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>
4 个解决方案
解决方案1
2 2021-04-03 09:21:36
You need to actually invoke the init function to register the event handlers您需要实际调用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>
解决方案2
0 2021-04-03 09:20:44
You need to invole the init function and you can set the text with textContent .您需要调用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>
解决方案3
0 2021-04-03 09:21:47
You can add onclick() function to the button.您可以将 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>
解决方案4
0 2021-04-03 10:02:23
You must avoid overusing the var keyword in order to avoid populating the global namespace.您必须避免过度使用var关键字以避免填充全局命名空间。 You should use const and encapsulate them within the function.您应该使用const并将它们封装在 function 中。 If you prefer, you can use an Event Bus system:如果您愿意，可以使用 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";
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.