Post
Ask Question

Updating Text in JavaScript

1. On the basis of User, Input update the text
 
We can change text depending on the input from the user.
 
By adding a Text Input, we can update our text with whatever the user types into the text input.
  1. <html>  
  2. <head>  
  3.     Hello  
  4. </head>  
  5. <body>  
  6.     <script type="text/javascript">  
  7.         function doChange() {  
  8.             var myInput = document.getElementById('myInput').value;  
  9.             document.getElementById('abhijeet').innerHTML = myInput;  
  10.         }  
  11.     </script>  
  12.     <p>  
  13.         Welcome to my site <b id='abhijeet'></b>  
  14.     </p>  
  15.     <input type='text' id='myInput' value='Enter Text Here' />  
  16.     <input type='button' onclick='doChange()' value='Change Text' />  
  17. </body>  
  18. </html> 
Output
 
User Input update the text
 
2. Using InnerHtml to update text
 
The innerHTML property is used with getElementById within the JavaScript code to refer to an HTML element and change its contents.
  1. <html>  
  2. <head>  
  3.     Hello  
  4. </head>  
  5. <body>  
  6.     <script type="text/javascript">  
  7.         function doChange() {  
  8.             document.getElementById('abhi').innerHTML = 'Abhijeet';  
  9.         }  
  10.         function doChange2() {  
  11.             document.getElementById('abhi').innerHTML = 'Honey';  
  12.         }  
  13.     </script>  
  14.     <p>  
  15.         Welcome to my site <b id='abhi'>guyzz</b>  
  16.     </p>  
  17.     <input type='button' onclick='doChange()' value='Change Text' />  
  18.     <input type='button' onclick='doChange2()' value='Again Change Text' />  
  19. </body>  
  20. </html> 
Output
 
InnerHtml updating text



TRENDING UP

View All

Learn JavaScript