テキストエリアの値を設定する機能 - データを置換するのではなく、追加のデータを追加して実行する

Question

私は関数で値を設定したいテキストエリアを持っています。最初にボタンをクリックして値を設定すると、値が正しく設定されます。

ラジオボタンのリストから別のオプションを使用してボタンを再度クリックして値を設定すると、テキストエリアの値はクリアされず、JS内のロジックから新しいデータデータに置き換えられますすでに存在しているものを置き換えるのではなく、テキストエリア内のデータにコードが追加されます。

私はテキストエリアの値をクリアしようとしています

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 = []; 

    ...