Question

我正在尝试将在文本框中输入的值传递到文本区域。但是，当我运行我的代码时，值会出现在textarea中，并且会消失。

Html代码：

        Customer Name
        <input type="text" id="name1TXT" />                        

       <textarea rows="6" cols="50" id="productList">

       </textarea>

使用Javascript：

function transferData() {
        var customer = document.getElementById("name1TXT").value;

        if (customer != "")
            document.getElementById('productList').value += customer + ","

        document.getElementById('name1TXT').value = "";
    }

有谁知道为什么会这样？

修改这是我的所有代码。

<!DOCTYPE html>

<title></title>

<style>

    .calcFrm {

    }

</style>

<table style="width:300px;" border="1">

    <tr>

        <td>Customer Name</td>

        <td><input type="text" id="name1TXT" /></td> 

    </tr>

    <tr>

       <td>Coating</td>

       <td>
            <select class="coating1DDL">
            <option value="1">Galvanized</option>
            <option value="2">Powder Coat</option>
            <option value="3">None</option>
            </select>
       </td>
    </tr>
    <tr>
       <td>Weight</td>
       <td><input type="text" id="weight1TXT" onkeyup="sum1();"/></td>
    </tr>
    <tr>
       <td>Length</td>
       <td><input type="text" id="length1TXT" onkeyup="sum1();"/></td>
    </tr>
    <tr>
        <td>Pieces</td>
       <td><input type="text" id="pcs1TXT" onkeyup="sum1();"/></td>
    </tr>
    <tr>
       <td>Pounds</td>
       <td><input type="text" id="pounds1TXT" onkeyup="sum1();"readonly="readonly" /></td>
    </tr>
    <tr>
       <td>Tons</td>
       <td><input type="text" id="tons1TXT" onkeyup="convertPounds1();" readonly="readonly" /></td>           
    </tr>       
</table>
<table style="width:300px;" border="1" class="tonsFrm2">
    <tr>
        <td>Customer Name</td>
        <td><input type="text" id="name2TXT" /></td>          
    </tr>
    <tr>
       <td>Coating</td>
       <td>
            <select class="coating2DDL">
            <option>Galvanized</option>
            <option>Powder Coat</option>
            <option>None</option>
            </select>
       </td>
    </tr>
    <tr>
       <td>Weight</td>
       <td><input type="text" id="weight2TXT" onkeyup="sum2();"/></td>
    </tr>
    <tr>
       <td>Length</td>
       <td><input type="text" id="length2TXT" onkeyup="sum2()"/></td>
    </tr>
    <tr>
        <td>Pieces</td>
       <td><input type="text" id="pcs2TXT" onkeyup="sum2();"/></td>
    </tr>
    <tr>
       <td>Pounds</td>
       <td><input type="text" id="pounds2TXT" readonly="readonly" onkeyup="sum2();" /></td>
    </tr>
    <tr>
       <td>Tons</td>
       <td><input type="text" id="tons2TXT" readonly="readonly" onkeyup="convertPounds2();" /></td>           
    </tr>       
</table>
<table style="width:300px;" border="1" class="tonsFrm3">
    <tr>            
        <td>Customer Name</td>
        <td><input type="text" id="text3TXT" /></td>             
    </tr>
    <tr>
       <td>Coating</td>
       <td>
            <select class="coating3DDL">
            <option>Galvanized</option>
            <option>Powder Coat</option>
            <option>None</option>
            </select>
       </td>
    </tr>
    <tr>
       <td>Weight</td>
       <td><input type="text" id="weight3TXT" onkeyup="sum3();"/></td>
    </tr>
    <tr>
       <td>Length</td>
       <td><input type="text" id="length3TXT" onkeyup="sum3();"/></td>
    </tr>
    <tr>
        <td>Pieces</td>
       <td><input type="text" id="pcs3TXT" onkeyup="sum3();"/></td>
    </tr>
    <tr>
       <td>Pounds</td>
       <td><input type="text" id="pounds3TXT" readonly="readonly" onkeyup="sum3();"/></td>
    </tr>
    <tr>
       <td>Tons</td>
       <td><input type="text" id="tons3TXT" readonly="readonly" onkeyup="convertPounds3();" /></td>           
    </tr>       
</table>
<button onclick="transferData()">Submit</button>
<button type="reset" value="Reset">Reset</button>
<button type="button">Add New Form</button>
<br />
Pounds Total
<input type="text" id="TotalPoundsTxt" readonly="readonly" onkeyup="totalPounds();" />
Tons Total
<input type="text" id="TotalTonsTXT" readonly="readonly" onkeyup="totalTons();" />
<br />
<textarea rows="6" cols="50" id="productList">

</textarea>
<br />
<button type="button">Save Input</button>

使用Javascript：

    //number correlate with form in order

    //functions for first form

    function sum1() {

        var txtFirstNumberValue = document.getElementById('weight1TXT').value;

        var txtSecondNumberValue = document.getElementById('length1TXT').value;

        var txtThirdNumberValue = document.getElementById('pcs1TXT').value;

        var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue) * parseInt(txtThirdNumberValue);

        if (!isNaN(result)) {
            document.getElementById('pounds1TXT').value = result;
        }

    }
    function convertPounds1() {
        var txtFirstNumberValue = document.getElementById('pounds1TXT').value;
        var result = parseInt(txtFirstNumberValue) / 2000;
        if (!isNaN(result)) {
            document.getElementById('tons1TXT').value = result;
        }

    }
    function galvCalc1() {
        var galvOption = document.getElementById('').value
    }
    //functions for second form 
    function sum2() {
        var txtFirstNumberValue = document.getElementById('weight2TXT').value;
        var txtSecondNumberValue = document.getElementById('length2TXT').value;
        var txtThirdNumberValue = document.getElementById('pcs2TXT').value;
        var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue) * parseInt(txtThirdNumberValue);
        if (!isNaN(result)) {
            document.getElementById('pounds2TXT').value = result;
        }

    }
    function convertPounds2() {
        var txtFirstNumberValue = document.getElementById('pounds2TXT').value;
        var result = parseInt(txtFirstNumberValue) / 2000;
        if (!isNaN(result)) {
            document.getElementById('tons2TXT').value = result;
        }

    }
    //Functions for third form
    function sum3() {
        var txtFirstNumberValue = document.getElementById('weight3TXT').value;
        var txtSecondNumberValue = document.getElementById('length3TXT').value;
        var txtThirdNumberValue = document.getElementById('pcs3TXT').value;
        var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue) * parseInt(txtThirdNumberValue);
        if (!isNaN(result)) {
            document.getElementById('pounds3TXT').value = result;
        }

    }
    function convertPounds3() {
        var txtFirstNumberValue = document.getElementById('pounds3TXT').value;
        var result = parseInt(txtFirstNumberValue) / 2000;
        if (!isNaN(result)) {
            document.getElementById('tons3TXT').value = result;
        }

    }
    function totalPounds(){
        var firstpoundvalue = document.getElementById('pounds1TXT').value;

        var secondpoundvalue = document.getElementById('pounds2TXT').value;

        var thirdpoundvalue = document.getElementById('pounds3TXT').value;

        var result = parseInt(firstpoundvalue) + parseInt(secondpoundvalue) + parseInt(thirdpoundvalue);

        if (!isNaN(result)) {
            document.getElementById('TotalPoundsTxt').value = result;
        }

    }

    function totalTons() {
        var firsttonvalue = document.getElementById('tons1TXT').value;

        var secondtonvalue = document.getElementById('tons2TXT').value;

        var thirdtonvalue = document.getElementById('tons3TXT').value;

        var result = parseInt(firsttonvalue) + parseInt(secondtonvalue) + parseInt(thirdtonvalue);

        if (!isNaN(result)) {
            document.getElementById('TotalTonsTXT').value = result;
        }

    }
    function transferData() {
        var customer = document.getElementById("name1TXT").value;

        if (customer != "")
            document.getElementById('productList').value += customer + ",";


    }
</script>

Answer 1

你应该使用像这样的价值

document.getElementById("writeArea").value = txt;

或者在jQuery中这样：

$('#myTextarea').val('');

Answer 2

我无法发表评论，但我创建了JSBin，似乎正在发挥作用。我不确定你是如何调用transferData函数来查看textarea清除所以我只是在输入文本框中添加了onBlur事件。

我还在清除name1TXT值的行中添加了分号。

我仍然认为你的代码一切正常。我的意思是没有任何奇怪的错误。但是你到底想要完成什么？似乎有3个客户名称框，但是当您单击提交时，只有1输出到textarea。它只抓取Customer1并将他/她的名字放入文本区域，并且每个提交都会重复此过程。您是否尝试添加所有3个客户？如果是这样，那么您的transferData函数

中需要更多逻辑

从文本框传递到textarea的值会自动删除

2 个答案: