Copying the result of one div to a textarea-div

Question

I'm working on a system, which should have the option to be be controlled via speech using the Webspeech API. My problem or question is: How do I copy the result of the voice recognition (which is stored in the "transcript-div") to the "usercomment textarea-div". Like the user says something and the recognized string should be copied to the usercomment automatically.

The corresponding lines of code:
The voice Recognizer:

    var recognition = new webkitSpeechRecognition();
    var final_transcript = '';
    var interim_transcript = '';
    var language = 'en-GB'; 

    recognition.continuous = true; // keep processing input until stopped
    recognition.interimResults = true; // show interim results
    recognition.lang = language; // specify the language

    recognition.onresult = function (event) {
        // Assemble the transcript from the array of results
        for (var i = event.resultIndex; i < event.results.length; ++i) {
            if (event.results[i].isFinal) {
                final_transcript = event.results[i][0].transcript;
            } else {
                interim_transcript = event.results[i][0].transcript;
            }
        }

        console.log("interim: " + interim_transcript);
        console.log("final: " + final_transcript);

        // update the web page
        if (final_transcript.length > 0) {
            $('#transcript').html(final_transcript);
        }

        if (interim_transcript.length > 0) {
            $('#interim').html(interim_transcript);
        }

For debugging purpose I've created another div, which shows the recognized phrases. This is working!

<div id="console" style="margin-top: 100px;">  
<h3>Console:</h3>  
    <div id="transcript"></div>  
    <div id="interim"></div>  
</div>

And now the content of the "transcript-Div" should be copied to the usercomment-textarea-Div:

<div id="UsercommentDiv" style="margin-top: 100px;">  
    <br> User Comment :<br> <textarea id="usercomment" style="width: 300px; height: 150px;" name="description" onLoad="fillUsercomment();"></textarea><br>
</div>

I've tried to do this by the following function:

function fillUsercomment(){
document.getElementById('usercomment').innerHTML = document.getElementById('transcript').innerHTML
}  
fillUsercomment();

The fillUsercomment function works (when I call the function manually, it pastes the content to the usercomment textarea. But how I have to change the code, to paste the recognized output on the fly in the textarea?

Thanks!

Answer 1

Take innerHTML of the div and apply it as value to the textarea (demo):

var div = document.getElementById("transcript");
var txt = document.getElementById("usercomment");

txt.value = div.innerHTML;

Or jQuery way:

$("#usercomment").val($("#transcript").html());

---

Edited

If final_transcript is the recognition result string you want to append, here:

// update the web page
if (final_transcript.length > 0) {
    $('#transcript').html(final_transcript);
}

you should append "final_transcript" to textarea's value:

var txt = $("#usercomment");
txt.val(txt.val() + final_transcript);

---

Edited 2

Here is your updated fiddle (look on 17 and 18 lines of JavaScript).

You can read what is val() function does here

Answer 2

Use jQuery

$("#usercomment").attr("value", $("#transcript").text() );

or

 $("#usercomment").val( $("#transcript").text() );

P.S. Sorry I misunderstood at first, I edited now.