使用 JavaScript 在 Textarea 中显示表单结果

Question

我是编程新手。我制作了一个表单，用 javascript 在 HTML 文本区域中显示结果。我正在尝试使 textarea 还显示指向使用 if/else 语句选择的项目的维基百科文章的链接：

         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;
    }

还有 HTML 表单：

        <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>

现在，文本区域中未定义更多信息。我该如何解决这个问题？

Answer 1

不要使用 document.write 将它打印到屏幕上的所有内容，而是将其存储为链接

         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
}