Change a Text using Javascript | GetElementById | InnerHTML Example
One of the basic things to learn in Javascript is how to change a text on an existing Id. We are going to see the use of GetElementById method that basically retrieves any element based on its ID. Kind of like grabbing an element based on its ID as was seen in Selenium CSS Selectors chapter. Then we will use InnerHTML as was discussed in our Hello World JS Chapter to display our text.
Time to learn some Javascript! Are you ready?
Steps on How to Change a Text using Javascript
Let us quickly create an HTML from scratch. How do you do that?
Step 1: Press Windows + R or open Run dialog box and type notepad in it. Then press enter.
Step 2: Once notepad opens type the following input in it:
<html>
<head> <title> Text Changer </title>
</head>
<body>
</body>
</html>
Step 2: Save the notepad file in .html format. That is, simply click on File > Save as…
Then provide a file name with an extension .html. Select All Files in the type and then click on Save button.
With that an HTML file titled “text.html” will get created. This is something we have already seen in our HTML sessions.
You can open the html file in your browser (simply double click) to see that the title that is being shown on the file is “text changer” as was provided in the notepad file.
Create Text
Let us create a text in a paragraph tag and give it an id in the body section now.
Step 3: To do that just right click on your created html file and click on Edit. If you have notepad++ installed in your system, you might be having that option as well.
Basically we are just trying to edit our html file.
Alternatively, you can simply drag and drop the file in a notepad file, and it will open it directly.
Step 4: Once the notepad file opens simply type the following in between the <body> tag:
<html> <head> <title> Text Changer </title> </head> <body> <p id = "d1"> Dog barks </p> </body> </html>
Once done, press Ctrl + S to Save.
We have simply created a text that identifies with the id “d1”.
Just open the text.html to check whether the text has begun showing on it or not.
There it is!
Create a Button
Let us now create a button that says “Change Text” in the body section.
To create a button all you have to do is use a button tag with some input in it.
Step 5: Insert the following code in the <body> section so that a button shows up.
<button> Change Text </button>
NOTE: You can go ahead and check if the button is visible by clicking open the html file.
As you can see the change text button is visible now.
But when you click on the button it doesn’t do anything. That’s because we haven’t provided any logic behind it. To do that you need to add some logic to the <button> tag.
Step 6: Type the following instead of what you had typed earlier:
<button onclick='document.getElementById("d1").innerHTML = "woof"'> Change Text </button>We have made use of getElementById function to retrieve the id “d1” and then made changes to the innerHTML to reflect “woof”.
So now the whole code would look something like this:
<html>
<head> <title> Text Changer </title>
</head>
<body>
<p id = "d1"> Dog barks </p>
<button onclick='document.getElementById("d1").innerHTML = "woof"'> Change Text </button>
</body>
</html>Step 7: Save the notepad file.
Step 8: Open your text.html file by double clicking it. Or by opening it in a browser.
Let’s see if our button works or not.
Step 9: Just click on the button.
That simple huh!
If you liked this tutorial on how to change a text using Javascript, stay tuned in for more cool Javascript tutorials that are winging your way.
