How can I use the output of a JavaScript function as a string inside a HTML textarea box?

Question

I have been creating a profile making program and I would like to use the output of this JS function as a simple string text inside the textarea box which the user can copy using the "Copy to Clipboard" button. Any ideas, please let me know ASAP. Here is my current code:

<!--HTML-->
<!--Button Code-->
<button onclick="copyprofile()">Copy to clipboard</button><br>   
<!--Textarea Code-->
<textarea id="text" cols="60" rows="13">I want output of createProfile() to be here</textarea><br>

//Javascript
function createProfile(){
    var fn,ln,a,fc,fs,ff,profile;
    fn = prompt("Please enter your first name","Enter first name here");
    ln = prompt("Please enter your last name","Enter last name here");
    a = prompt ("Please enter your age","Enter age here");
    fc = prompt("Please enter your favourite colour","Enter favourite color here");     
    fs = prompt("Please enter your favourite sport","Enter favourite sport here");
    ff = prompt("Please enter your favourite food","Enter favourite food here");
    profile = ("Name: " + fn + " " + ln + "<br>Age: " + a + "<br>Favourite colour: " + fc + "<br>Favourite sport: " + fs + "<br>Favourite food: " + ff);
    return profile;
}
function copyProfile(){
    var text = document.getElementById('text');
    var range = document.createrange();

    range.selectNode(text);
    window.getSelection().addRange(range);
    document.execCommand(copy);
}

If you have any thoughts or ideas on how to achieve this, please let me know

Answer 1

Being that you have already saved everything in a string assigned to profile, just reference the element you want to update and assign it as the value.

In javascript:

document.getElementById("text").value = profile;

And if you want the to keep the line breaks, you'll need to do something other than <br> as a textarea doesn't typically render HTML. I'd suggest doing a carriage return or line feed. \n

profile =  ("Name: " + fn + " " + ln + "\nAge: " + a + "\nFavourite colour: " + fc + "\nFavourite sport: " + fs + "\nFavourite food: " + ff);;

Here is a JSFiddle with an example https://jsfiddle.net/x1w1t8ux/

---

Update

I took some time to look at the rest of your code as you said it still was not working as you expected. Your copyProfile function has a couple of errors. If you open up your developer console when trying to run these functions, you'll see the error messages:

Uncaught TypeError: document.createrange is not a function

You're line document.createrange() is not a function. You need to camel case it to be document.createRange().

After you fix that error, try to run the code again will display another error in the console:

Uncaught ReferenceError: copy is not defined

In this line document.execCommand(copy); you are referencing a variable called copy. That variable does not exist, nor is it what you're looking for. You are wanting to pass the string copy to the function execCommand. It should look like document.execCommand('copy'); (with quotes, as that's how you identify a string in JavaScript.

In your HTML, when you click on your Copy To Clipboard button <button onclick="copyProfile()">Copy to clipboard</button> it throws an error

Uncaught ReferenceError: copyprofile is not defined

You do not have a function called copyprofile, you have one called copyProfile. Function names are case sensitive. I would recommend sticking to a consistent naming convention (such as camel case)

Lastly, no where in your code are you calling the function createProfile(). So I created it as a second button in my testing.