Question

我有一个textarea，我希望用函数设置它的值。当我第一次单击按钮设置值时，值会正确填充。

如果我然后单击按钮再次设置值，使用单选按钮列表中的其他选项，textarea中的值不会被清除并替换为新数据 - 从JS代码中的逻辑重新分配数据被附加到textarea中的数据，而不是替换已存在的数据。

我试图用以下方法清除textarea值：

document.getElementById("output").value = '';

但那并不清楚。

HTML：

    <label class="radio-inline">
      <input type="radio" name="myArray" id="radioActivity" value="valActivity"> Activity
    </label>
    <label class="radio-inline">
      <input type="radio" name="myArray" id="radioFlags" value="arrFlags"> Flags
    </label>
    <label class="radio-inline">
      <input type="radio" name="myArray" id="radioFood" value="arrFood"> Food
    </label>
    <label class="radio-inline">
      <input type="radio" name="myArray" id="radioNature" value="arrNature"> Nature
    </label>
    <label class="radio-inline">
      <input type="radio" name="myArray" id="radioObjects" value="arrObjects"> Objects
    </label>
    <label class="radio-inline">
      <input type="radio" name="myArray" id="radioPeople" value="arrPeople"> People
    </label>
    <label class="radio-inline">
      <input type="radio" name="myArray" id="radioLetters" value="arrLetters"> Letters
    </label>
    <label class="radio-inline">
      <input type="radio" name="myArray" id="radioSymbols" value="arrSymbols"> Symbols
    </label>
    <label class="radio-inline">
      <input type="radio" name="myArray" id="radioTravel" value="arrTravel"> Travel
    </label>

    <input type="text" class="form-control" id="itemSet" value="10" />

    <button id="rdio"> Check Radio </button>

    <textarea id="output" class="form-control" style="width:95%; height:500px; margin-top:20px;"></textarea>

JS：

    var myCols = 2;

    var arrActivity = ["alien monster","man in business suit levitating","fencer","horse racing","skier","snowboarder","golfer","surfer","rowboat","swimmer"];
    var arrFlags = ["ascension","andorra","the united arab emirates","afghanistan","antigua and barbuda","anguilla","albania","armenia","angola","antarctica"];
    var arrFood = ["grapes","melon","watermelon","tangerine","lemon","banana","pineapple","red apple","green apple","pear"];
    var arrNature = ["see-no-evil monkey","hear-no-evil monkey","speak-no-evil monkey","splashing sweat symbol","dash symbol","monkey face","monkey","gorilla","dog face","dog"];
    var arrObjects = ["skull and crossbones","love letter","bomb","hole","shopping bags","prayer beads","gem stone","hocho","amphora","world map"];
    var arrPeople = ["grinning face","grinning face with smiling eyes","face with tears of joy","rolling on the floor laughing","smiling face with open mouth","smiling face with open mouth and smiling eyes","smiling face with open mouth and cold sweat","smiling face with open mouth and tightly-closed eyes","winking face","smiling face with smiling eyes"];
    var arrLetters = ["letter a","letter b","letter c","letter d","letter e","letter f","letter g","letter h","letter i","letter j"];
    var arrSymbols = ["eye in speech bubble","heart with arrow","heavy black heart","beating heart","broken heart","two hearts","sparkling heart","growing heart","blue heart","green heart"];
    var arrTravel = ["racing car","racing motorcycle","silhouette of japan","snow capped mountain","mountain","volcano","mount fuji","camping","beach with umbrella","desert"];

    var arrNew = [];

    function boom()
    {

        if (document.getElementById("radioActivity").checked) {
            y = arrActivity;
        } else if(document.getElementById("radioFlags").checked) {
            y = arrFlags;
        } else if (document.getElementById("radioFood").checked) {
            y = arrFood;
        } else if (document.getElementById("radioNature").checked) {
            y = arrNature;
        } else if (document.getElementById("radioObjects").checked) {
            y = arrObjects;
        } else if (document.getElementById("radioPeople").checked) {
            y = arrPeople;
        } else if (document.getElementById("radioLetters").checked) {
            y = arrLetters;
        } else if (document.getElementById("radioSymbols").checked) {
            y = arrSymbols;
        } else if (document.getElementById("radioTravel").checked) {
            y = arrTravel;
        }

        for (var i = 0; i < y.length; i+=myCols) {
            arrNew.push(
                y.slice(i, i+myCols)
            );
        }

        // attempts to clear the output...
        // op = '';
        document.getElementById("output").value = '';

        // set the textarea output
        op = JSON.stringify(arrNew, null, 4);
        document.getElementById('output').value = op;

    }

    var z = document.getElementById('rdio');
    z.addEventListener("click", boom);

Codepen显示问题： https://codepen.io/paperknees/pen/JrgNzp

Answer 1

每次都应该在函数调用中将arrNew声明为空数组。

function boom() {

  var arrNew = [];

  ...

设置textarea值的函数 - 附加运行通过追加数据而不是替换它

1 个答案: