Check out the problem

I want to replace a word that is given in the input text but it’s not working. check out the replace function.

<textarea id="sentence" placeholder="write a sentence" maxlength="15"></textarea>
	<button onclick="print()">print</button>
	<input id="add" type="text" name="text" maxlength="12">
	<button onclick="add()">Add</button>
	<input id="replace" type="text" name="text">
	<button onclick="replace()">replace</button>

	<script type="text/javascript">
		function print(){
			var a=document.getElementById("sentence").value;
			
			document.getElementById("demo").innerHTML=a;
			
			
		}
		function add(){
				
				var c= document.getElementById("add").value;

				var result=document.getElementById("sentence").value+c;
				document.getElementById("demo").innerHTML=result;
			}
		function replace(){
			var str=document.getElementById("sentence").value+document.getElementById("add").value;
			
			var word= document.getElementById("replace").value;
			
			var result= str.replace(word);

			document.getElementById("demo").innerHTML=result;
		}

			
		
		
	</script>

sir, I add a textarea where i can write a sentence and the word will be limited and for that i have add another button “add” and with this i can add a word in the end of the sentence and for editing I use a button replace so that i can replace the word. The problem is print and add function is working but i can’t make the replace function workable. If i have a define string then i can replace any word easily but I don’t know what will be my input in the box. so I can’t put the word on the replace bracket and that’s the problem I am facing.