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.
<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
![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.
<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