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>
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>
-
Simply
ifon the textContent to know what to change it to. Granted you need to preserve what it originally was to be able to change it back. That could be done with a dataset property though – Taplar Commented Aug 5, 2020 at 16:36 - Curly Braces { } are used to group statements. So if you need to execute only 1 statement you don't need them. Otherwise if you need to associate multiple statements with if....else, for, while, ... you have to add curly braces around those statements. – gpl Commented Aug 5, 2020 at 16:50
5 Answers
Reset to default 3as @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>
document.querySelector("button").addEventListener("click", (e) => {
let last = e.target.last;
if (last) {
e.target.last = e.target.textContent;
e.target.textContent = last;
} else {
e.target.last = e.target.textContent;
e.target.textContent = "I was clicked";
}
});<button>Click Me</button>If you want a more dynamic solution (no hardcoded values in the handler, it will automatically track what the original text was), you could do it like this:
const toggleTextOnClick = (text, el) => {
let originalText = el.textContent;
el.addEventListener("click", (e) => {
e.target.textContent = text;
[originalText, text] = [text, originalText];
})
}
const btn = document.querySelector("button");
toggleTextOnClick("I was clicked", btn);<button>Click Me</button>check out this code:
<!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) => {
if(e.target.textContent == "Click Me")
e.target.textContent = "I was clicked"; //Changes click me to I was
else
e.target.textContent = "Click Me"; //Changes click me to I was
});
</script>
</body>
</html>I have added if...else block. Now if button's text is Click Me, statement under if gets executed otherwise statement under else get executed.