如何在使用 js 例如单击按钮触发事件时将新文本添加到文本区域而不删除旧文本

Question

这是一个简单的购物车添加 program.If 我点击添加按钮我需要在文本区域添加所选内容但是当我添加第二个项目时我的第一个项目被删除并且我的文本区域是重置并显示我的第二个内容如何避免这种情况。

<!-- This is a simple cart add program.If i Click the add click button i need to add the selected content on the text area but when i add the second item my first item was deleted and my text area is reset and my second content is displayed how to avoid that.!-->
    <html lang="en">
        <head>
        <title>Chapter 10, Temp</title>
        <style>
        p{
            padding:0;
            margin:15px 0 0 0;
        }
        ul{
        list-style: none;

            margin:0;   
        }
        #listing{
            float:left;
            width:40%;
            background-color:#CCFFFF;
        }
        #CartView{
            margin-left:45%;
            width:18%;
            background-color:#99ff99;
            position: fixed;
        }
        #deliverPage{
            position: fixed;
            width:18%;
            background-color:#E0E0E0;
            margin-left:70%;

        }
        </style>
        </head>


        <body>


            <form name="myForm">
            <div id="listing">
            <div id="pCoreType">
            <p><label for="cpu"> Select the Processor Core : </label></p>
            <ul>
                <li><input type="radio" name="coreType" value ="Core2Duo" /><label>Core2Duo - Rs.3500/-</label></li>
                <li><input type="radio" name="coreType" value ="I3" /><label>I3 - Rs.5000/-</label></li>
                <li><input type="radio" name="coreType" value ="I5" /><label>I5 - Rs.7500/-</label></li>
                <li><input type="radio" name="coreType" value ="I7" /><label>I7 - Rs.9500/-</label></li>
            </ul>
            <input type="button" value="Add To Cart" name="pCoreAdd"/>
            </div>

            <div id="motherBoard">
            <p><label for="MB"> Select the MotherBoard Model: </label></p>
            <ul>
                <li><input type="radio" name="mbModel" value ="Intel" /><label>Intel - Rs.3500/-</label></li>
                <li><input type="radio" name="mbModel" value ="Asus" /><label>Asus - Rs.3900/-</label></li>
                <li><input type="radio" name="mbModel" value ="GigaByte" /><label>GigaByte - Rs.3700/-</label></li>
                <li><input type="radio" name="mbModel" value ="FoxConn" /><label>FoxConn - Rs.4500/-</label></li>
            </ul>
            <input type="button" value="Add To Cart" name="mbModelAdd"/>
            </div>

            </div>


            <div id="CartView">
            Cart: <input type="button" value="CheckOut" name="checkOut"/><br/>
            <textarea name="cartDetails" rows="15" cols="30"></textarea>
            </div>
            <div id="deliverPage">
            CheckOuts <br />
            Your Order Total Cost is :
            <input type="text" name="orderTotal"/>

            </div>
            </form>


            <script>

            var myForm = document.myForm;
            var CartView = myForm.cartDetails;
            var CheckOuts = document.getElementById("deliverPage");
            var totalCost =[];


            function pCoreType(){
                var radios = myForm.coreType;
                var corePrice = ["3500","5000","7500","9500"];

            for(var index = 0; index < radios.length; index++){
                    if(radios[index].checked){
                        var ItemSelected = radios[index].value;
                        var price = parseInt(corePrice[index],10);
                        totalCost.push(price);
                        CartView.value = "Processor - " + ItemSelected + " - Rs."+ price ;

                    }
                }


            }
            function mbModel(){
                var radios = myForm.coreType;
                var corePrice = ["3500","3900","3700","4500"];
                for(var index = 0; index < radios.length; index++){
                    if(radios[index].checked){
                        var ItemSelected = radios[index].value;
                        var price = parseInt(corePrice[index],10);
                        totalCost.push(price);
                        CartView.value = "\nMotherBoard - " + ItemSelected + " - Rs."+ price;
                    }
                }


            }
        myForm.pCoreAdd.addEventListener("click",pCoreType);
        myForm.mbModelAdd.addEventListener("click",mbModel);
            </script>

        </body>
    </html>

Answer 1

您只需要将第一个保存为变量，然后将其添加到第二个内容中。

 var content = document.getElementById(CartView).value;
 CartView.value = content + " \n Processor - " + ItemSelected + " - Rs."+ price ;

Answer 2

您需要修改

CartView.value =someValue 到 CartView.value += someValue

从HERE

验证

我也觉得上面的代码可以修改，同样的事情可以用更少的代码行来实现

如何在使用 js 例如单击按钮触发事件时将新文本添加到文本区域而不删除旧文本

How to add new text to the textarea without deleting the older one when an event triggers using js for example clicking button

javascript

javascript-events