Is it possible to receive input form a textarea and display output in the same textarea afterwards?

Question

I'm new to programming and working on my first small project. Basically, I am getting user text input and want to replace some letters. The problem is to display the output in the same textarea as I am getting the input in, is it even possible? This is what I got so far.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Plagiat</title>
<meta name="Beskrivelse" content="Et program som kan gøre din tekst 
usynlig for plagiatkontol.">

</head>
<body>
<script type="text/javascript">
function letter_magic()
{
var text = document.getElementById("input_text").value;
var end_text = text.replace(/A/g, "b").replace(/e/g, "o");
document.write(end_text);
}
</script>

<textarea cols="40" rows="10" id="input_text" placeholder="Indsæt 
din tekst... "> </textarea>
<br/>
<button onclick="letter_magic()" id="button1">Start</button>

</body>
</html>

`document.write()` overwrites your entire HTML every time. Do not use. Learn [DOM manipulations](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents). — PM 77-1, Aug 01 '19 at 19:54
How do you know when to read from the textarea & when to write to it? — Scott Hunter, Aug 01 '19 at 19:55
See https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — PM 77-1, Aug 01 '19 at 19:59

score 0 · Answer 1 · answered Aug 02 '19 at 06:25

Yes. It is very much possible.

All you need to do is trigger the relevant events in JavaScript. For e.g., the below code wouldbe triggered as soon as the value of textarea is changed and the focus shifts to some other element in the DOM.

<textarea cols="40" rows="10" id="input_text" onChange="modifyInput($event)" placeholder="Indsæt din tekst... "> </textarea>

Then, in your JS code

function modifyInput(event){
    var oldValue = event.target.Value;
    var newValue = "I changed this value.";
    document.getElementById("input_text").value = newValue;
}

score 0 · Accepted Answer · answered Aug 02 '19 at 06:48

Set the value of the textarea to the updated value. Your function should look like this.

<script type="text/javascript">
    function letter_magic()
    {
        var textbox = document.getElementById("input_text");
        var text=textbox.value;
        var end_text = text.replace(/A/g, "b").replace(/e/g, "o");
        textbox.value=end_text;
    }
</script>

Is it possible to receive input form a textarea and display output in the same textarea afterwards?

2 Answers2