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

Community · Accepted Answer · 2017-05-23 11:58:45Z

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.

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Jun 2, 2016 at 18:32

EnigmaRM

7,61211 gold badges48 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

Archit123 Over a year ago

Thanks mate. Appreciate the help!

EnigmaRM Over a year ago

No problem. if it solved your problem, go ahead and mark as accepted answer to help others in the future as well.

Archit123 Over a year ago

Hi mate, just wondering if you have any idea of what to put inside the actual <textarea> tag as I am not sure how to use the code that you have given me. In other words, where and how should I use your code.

Archit123 Over a year ago

Sorry, I am a new programmer and this is how I am trying to run my code: I have been trying to use: profile = ("Name: " + fn + " " + ln + "\nAge: " + a + "\nFavourite colour: " + fc + "\nFavourite sport: " + fs + "\nFavourite food: " + ff); document.getElementById('text').value return: profile; <pre> <code> But this has not been working. Any ideas?

EnigmaRM Over a year ago

Looks like you're missing assigning profile to the element's value. document.getElementById("text").value = profile;

|

Collectives™ on Stack Overflow

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

1 Answer 1

19 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

19 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related