changing span to text with javascript using textcontent
Question
I created an empty span within p tags which is supposed to change and reveal text when the button is clicked (button 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 answers
solution1
2 2021-04-03 09:21:36
You need to actually invoke the init function to register the event handlers
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>
solution2
0 2021-04-03 09:20:44
You need to invole the init function and you can set the text with 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>
solution3
0 2021-04-03 09:21:47
You can add onclick() function to the button.
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>
solution4
0 2021-04-03 10:02:23
You must avoid overusing the var keyword in order to avoid populating the global namespace. You should use const and encapsulate them within the function. If you prefer, you can use an Event Bus system:
// 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";
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.