Scribd
Upload
13 views

changing the text of p tag in HTML ...

Change the text of p- with the help of JavaScript

Uploaded by

harismr622
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

changing the text of p tag in HTML ...

Change the text of p- with the help of JavaScript

Uploaded by

harismr622
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html>
<head>
<title>Toggle P Tag Text</title>
<style>
/* Optional styling for visual feedback */
.clicked {
font-weight: bold;
color: blue;
}
</style>
</head>
<body>

<div id="myContainer">
<p id="myParagraph">Initial Text</p>
</div>

<script>
const myParagraph = document.getElementById('myParagraph');
const initialText = myParagraph.textContent; // Store the initial text
const newText = "Text has been changed!"; // The text to switch to

myParagraph.addEventListener('click', function() {
if (myParagraph.textContent === initialText) {
myParagraph.textContent = newText;
myParagraph.classList.add("clicked"); //Optional class for visual
feedback
} else {
myParagraph.textContent = initialText;
myParagraph.classList.remove("clicked"); //Optional class for
visual feedback
}
});
</script>

</body>
</html>

Key improvements and explanations:


● Storing Initial Text: The code now stores the original text of the paragraph in the
initialText variable. This is important because it allows you to easily revert back to the
original text.
● textContent: Using textContent is generally preferred over innerHTML when you're just
dealing with plain text. It's more performant and avoids potential security issues if the text
might contain HTML characters.
● Clearer Logic: The if/else statement is more straightforward now, directly comparing the
current textContent to the initialText.
● Self-Contained Example: This is a complete, runnable HTML example, making it easier
to test and understand.
● Optional Styling: I've added some optional CSS and a class toggle to provide visual
feedback when the text is changed. This makes the interaction clearer to the user.
● Event Listener on the Paragraph: The event listener is now directly attached to the <p>
tag itself, which is cleaner and more efficient than attaching it to a parent container if you
only want to handle clicks on the paragraph.
How it works:
1. The HTML sets up a <div> containing a <p> tag with some initial text.
2. The JavaScript gets a reference to the <p> tag.
3. It stores the initial text and the new text you want to switch to.
4. An event listener is added to the <p> tag that listens for 'click' events.
5. When the <p> tag is clicked:
○ It checks if the current text is the initialText.
○ If it is, it changes the text to newText.
○ If it's not (meaning it's already newText), it changes the text back to initialText.
○ It also toggles an optional CSS class for visual feedback.
This is a much more robust and user-friendly way to toggle the text of a paragraph on click.

You might also like