Menu
I have a simple button that when clicked, the text on the button will change using a event listener. However, I want to add some logic to the code so that when I click it again it just goes back to the original text. I am fairly new to javascript and trying to advance my skills.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Listeners JS</title>
</head>
<body>
<button>Click Me</button>
<script>
document.querySelector("button").addEventListener("click", (e) => {
e.target.textContent = "I was clicked"; //Changes click me to I was
});
</script>
</body>
</html>
460
asked Feb 26 '26 12:02
as @Taplar suggested :
EDIT: to make it even cleaner you can single line if statement:
document.querySelector("button").addEventListener("click", (e) => {
(e.target.textContent === 'Click Me') ? e.target.textContent = "I was clicked" : e.target.textContent = "Click Me"
});
Older answer without single line if statement:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Listeners JS</title>
</head>
<body>
<button>Click Me</button>
<script>
document.querySelector("button").addEventListener("click", (e) => {
//checking the text content in the button if its Click Me
if(e.target.textContent === 'Click Me'){
e.target.textContent = "I was clicked"; //Changes click me to I was
//if its not Click Me it will change back to Click Me
} else {
e.target.textContent = "Click Me"; //change back to Click Me
}
});
</script>
</body>
</html>
The idea is this:
document.querySelector("button").addEventListener("click", (e) => {
let textContent = e.target.textContent;
if (textContent == "Click Me") {
e.target.textContent = "I was clicked";
}
else {
e.target.textContent = "Click Me";
}
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Listeners JS</title>
</head>
<body>
<button>Click Me</button>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With