Updating Text in JavaScript

Abhijeet Singh
2y
34.2k
0
2

Article

Based on the User, Input updates the text in JavaScript

We can change text depending on the input from the user in JavaScript.

Adding a Text Input can update our text with whatever the user types into the text input.

<html>  
<head>  
    Hello  
</head>  
<body>  
    <script type="text/javascript">  
        function doChange() {  
            var myInput = document.getElementById('myInput').value;  
            document.getElementById('abhijeet').innerHTML = myInput;  
        }  
    </script>  
    <p>  
        Welcome to my site <b id='abhijeet'></b>  
    </p>  
    <input type='text' id='myInput' value='Enter Text Here' />  
    <input type='button' onclick='doChange()' value='Change Text' />  
</body>  
</html>

Output

Using InnerHtml to update text in JavaScript

The innerHTML property is used with getElementById within the JavaScript code to refer to an HTML element and change its contents.

<html>  
<head>  
    Hello  
</head>  
<body>  
    <script type="text/javascript">  
        function doChange() {  
            document.getElementById('abhi').innerHTML = 'Abhijeet';  
        }  
        function doChange2() {  
            document.getElementById('abhi').innerHTML = 'Honey';  
        }  
    </script>  
    <p>  
        Welcome to my site <b id='abhi'>guyzz</b>  
    </p>  
    <input type='button' onclick='doChange()' value='Change Text' />  
    <input type='button' onclick='doChange2()' value='Again Change Text' />  
</body>  
</html>

Output