Display Form Results in Textarea with JavaScript

Question

I'm new to programming. I've made a form that displays results in a HTML textarea with javascript. I'm trying to make the textarea also display a link to the wikipedia article about the item selected using an if/else statement:

         function setFlower(type) {
        flowerName = type;  
    }

    //method for displaying the method in the textarea
    function displayMessage() {
        var fullName = document.flowerOrderForm.fullName.value;

        // if/else statements for more information           
        if (flowerName == document.flowerOrderForm.flowerTypes.roses) {
            var moreInfo = "https://en.wikipedia.org/wiki/Rose";
        } 
        else if (flowerName == document.flowerOrderForm.flowerTypes.carnations) {
                var moreInfo = "https://en.wikipedia.org/wiki/Dianthus_caryophyllus";
            } 

        else if (flowerName == document.flowerOrderForm.flowerTypes.daisies) {
                var moreInfo = "https://en.wikipedia.org/wiki/Asteraceae";
            }           


        document.flowerOrderForm.info.value = 
        fullName + ", " + "thank you for your inquiry about " + flowerName + "." + NL
        + "Here is a link for more information: " + moreInfo;
    }

And the HTML form:

        <form name = "flowerOrderForm">
        <fieldset name = "form"> 
            <fieldset name = "inputControls"> 
                <p class = "name">
                    <!--Name textbox and label-->
                    <label for = "fullName">Full Name</label><br />
                    <input class = "fullName" type = "text" name = "fullName" value = "" id = "fullName" size = "35" />
                </p>
                <p class = "flowers">
                        <!--flower type radio buttons-->
                    <span>
                        <input type = "radio" name = "flowerTypes" value = "roses" id = "roses" onclick = "setFlower(this.value)" />
                        <label for= "roses">Roses</label>  
                    </span>
                    <span>   
                        <input type = "radio" name = "flowerTypes" value = "carnations" id = "carnation" onclick = "setFlower(this.value)" />
                        <label for = "carnation">Carnations</label>
                    </span>
                    <span>
                        <input type = "radio" name = "flowerTypes" value = "daisies" id = "daisy" onclick = "setFlower(this.value)" />
                        <label for = "daisy">Daisies</label>
                    </span>
                </p><!--end flowers-->
            </fieldset><!--end inputControls-->

            <fieldset name = "submit">
                <!--request info submit button-->
                <input class = "requestInfo" type = "button" name = "flowerOrder" value = "Request Information" onclick = "displayMessage()" />
            </fieldset><!--end submit-->
            <fieldset name = "infoBox">
                <!--textarea for displaying submitted information-->
                <textarea name = "info" readonly = "true" value = "" rows = "7" cols = "50"></textarea>
            </fieldset><!--end infoBox-->
        </fieldset><!--end form-->
    </form>

Right now, moreInfo is undefined in the text area. How can I fix this?

Answer 1

Dont use document.write all it does it print it out to the screen instead store it as link

         function setFlower(type) {
    flowerName = type;  
}

//method for displaying the method in the textarea
function displayMessage() {
    var fullName = document.flowerOrderForm.fullName.value;
    var moreInfo;

    // if/else statements for more information           
    if (flowerName == document.flowerOrderForm.flowerTypes.roses) {
        moreInfo = "https://en.wikipedia.org/wiki/Rose";
    } 
    else if (flowerName == document.flowerOrderForm.flowerTypes.carnations) {
            moreInfo = "https://en.wikipedia.org/wiki/Dianthus_caryophyllus";
        } 

    else if (flowerName == document.flowerOrderForm.flowerTypes.daisies) {
            moreInfo = "https://en.wikipedia.org/wiki/Asteraceae";
        }



    document.flowerOrderForm.info.value = 
    fullName + ", " + "thank you for your inquiry about " + flowerName + "." + NL
    + "Here is a link for more information: " + moreInfo; 
    //  moreInfo would be a link now as a string and so will be displayed in textarea
}