如何创建一个清除所有数组的按钮？答案

【问题标题】：How do you create a button that clears all array?如何创建一个清除所有数组的按钮？
【发布时间】：2015-07-23 10:27:55
【问题描述】：

我是 javascript 新手，我试图创建一个代码来通过一个按钮清除数组中的所有数据。它的工作原理是，一旦我单击某个地图区域，它就会将该数据放入 textarea 中。输出将是一个数组。但是当我尝试删除它并单击另一个地图区域时，会出现以前的数据。我只是想知道如何在不出现数据的情况下清除数据示例代码如下。谢谢！

http://jsfiddle.net/qpmxnv2g/5/

HTML

<img src="http://79.170.44.80/sicuandomain.com/img/Capture.JPG" alt="" usemap="#Map" />
<map name="Map" id="Map">

<area class="red" alt="" title="Right Hand"  href="#" shape="poly" coords="19,317,45,317,50,334,58,365,55,367,46,367,44,379,35,385,22,378,17,345,4,353,3,341" />

<area class="red" alt="" title="Right Forearm"  href="#" shape="poly" coords="32,224,18,316,47,317,68,224" />

<area class="red" alt="" title="Right Bicep"  href="#" shape="poly" coords="45,119,37,137,35,223,67,228,61,159,45,119" />

<area class="red" alt="" title="Pelvis"  href="#" shape="poly" coords="96,297,136,297,128,318,111,320" />

<area class="red" alt="" title="Left Forearm"  href="#" shape="poly" coords="167,216,198,216,212,314,187,315,177,273,169,250" />

<area class="red"alt="" title="Left Bicep"  href="#" shape="poly" coords="178,109,164,159,168,213,195,213,197,176,191,124,189,115" />

<area id="red"alt="" title="Right Foot"  href="#" shape="poly" coords="86,557,110,559,112,622,96,632,75,627" />
<area class="red"alt="" title="Left Foot"  href="#" shape="poly" coords="144,557,145,591,153,619,129,634,114,623,120,557" />
<area class="red"alt="" title="Left Leg"  href="#" shape="poly" coords="155,453,157,495,145,558,119,558,118,453" />
<area class="red"alt="" title="Neck"  href="#" shape="poly" coords="92,72,107,88,124,88,137,72,137,90,143,95,119,107,90,95,96,88," />
<area class="red" alt="" title="Face"  href="#" shape="poly" coords="90,16,114,5,136,16,145,58,135,74,115,87,96,72,84,60" />
<area class="red"alt="" title="Chest"  href="#" shape="poly" coords="45,119,90,97,118,111,145,97,175,110,165,175,62,175" />
<area class="red"alt="" title="Stomach"  href="#" shape="poly" coords="62,180,170,173,165,218,162,243,165,265,142,293,95,294,65, 270,70,245,64,219" />
<area class="red"alt="" title="Left Hand"  href="#" shape="poly" coords="188,318,208,316,217,324,230,347,222,350,212,342,209,376,193, 380,183,375,183,355,174,364,180,338,184,318" />
<area class="red"alt="" title="Right Thigh"  href="#" shape="poly" coords="67,274,119,340,116,452,79,452,78,433,61,363" />
<area class="red"alt="" title="Left Thigh"  href="#" shape="poly" coords="119,340,167,266,176,314,172,359,157,452,154,453,117,453" />
<area class="red"alt="" title="Left Leg"  href="#" shape="poly" coords="78,453,77,512,87,557,109,558,115,454" />
<area class="red"alt="" title="Back Head"  href="#" shape="poly" coords="369,4,351,17,350,44,360,66,396,66,404,45,407,21,387,4" />
<area class="red" alt="" title="Back Neck"  href="#" shape="poly" coords="361,66,354,93,377,97,401,92,396,68" />
<area class="red" alt="" title="Right Tricep" href="#" shape="poly" coords="444,116,453,219,425,227,420,205,430,139" />
<area class="red"alt="" title="Back Body"  href="#" shape="poly" coords="353,92,307,115,325,173,323,249,374,258,420,249,424,171,442,114,403,92,376,100" />
<area class="red"alt="" title="Left Tricep"  href="#" shape="poly" coords="305,116,298,142,294,219,321,225,323,170" />
<area class="red"alt="" title="Left Backarm"  href="#" shape="poly" coords="293,219,285,239,280,303,301,309,319,246,319,228" />
<area class="red"alt="" title="Right Backarm"  href="#" shape="poly" coords="426,228,455,222,462,249,464,308,446,310,437,281" />
<area class="red"alt="" title="Buttocks"  href="#" shape="poly" coords="322,250,313,305,335,326,361,332,372,325,385,330,404,329,430,315,429,289,421,253,374,258" />
<area class="red" alt="" title="Back Left-Hand" href="#" shape="poly" coords="277,308,260,335,280,372,289,373,303,365,307,332,302,310" />
<area class="red" alt="" title="Back Right-Hand" href="#" shape="poly" coords="443,312,466,309,485,330,476,358,460,370,442,359" />
<area class="red" alt="" title="Left Hamstring" href="#" shape="poly" coords="312,306,344,331,363,331,373,327,370,436,331,435,319,376" />
<area class="red" alt="" title="Right Hamstring" href="#" shape="poly" coords="375,325,399,330,430,314,428,368,415,407,414,436,376,435,377,400,374,372" />
<area class="red" alt="" title="Left Calves" href="#" shape="poly" coords="333,436,366,440,365,453,371,486,366,515,,365,542,342,543,344,535,334,492" />
<area class="red" alt="" title="Right Calves" href="#" shape="poly" coords="377,436,414,437,410,452,413,487,400,543,378,543,376,516,374,487,377,456" />
<area class="red" alt="" title="Left Underfoot" href="#" shape="poly" coords="340,545,341,586,335,613,360,633,371,630,366,570,368,545" />
<area class="red" alt="" title="Right Underfoot" href="#" shape="poly" coords="377,546,390,540,401,543,405,553,403,587,410,614,390,633,374,631,372,610,378,565" />

</map>
<p>You have clicked: </p><textarea name="body" id="body"></textarea>
<input id="Clear" type="submit" name="clear"value="Clear "></input>
<input id="submit1"type="submit" name="submit"value="Submit"></input>

Javascript

var map = document.getElementById("Map");
    map.addEventListener("click", function(e) {
    callAction(e.target);
    });
var body = [];
document.getElementbyId("body").innerHTML = body;


function callAction(area) {
    body.push(area.title);
    document.getElementById("body").value = body;
}

var clear = document.getElementById("Clear");

function clear(){
    body.length=0;
    document.getElementById("Clear").value = body;
}

【问题讨论】：

重新编辑。链接到 JSBin

标签： javascript html arrays input

【解决方案1】：

请提供您的数组，是否故意将 textarea 的值复制到按钮上？

或者如果你想清除文本区域，

document.getElementById("body").innerHTML = "";

【讨论】：

【解决方案2】：

您可以尝试将数组设置为空，如下所示：

arrayName = []

或者通过使用 while 循环将所有元素从数组中弹出：

while(arrayName.length) {
    arrayName.pop();
}

【讨论】：

【解决方案3】：

你的代码有几个问题：

TypeError: document.getElementbyId 不是函数

也许你的意思是document.getElementById。

清除按钮没有事件监听器。

此外，您在清除时覆盖了 清除按钮 的值，而不是 textarea 的值。

而不是var clear = …和function clear，使用相同的名称，写

document.getElementById("Clear").addEventListener('click',function(){
  body.length=0;
  document.getElementById("body").value='';
});

type="submit" 在<form> 之外没有任何意义，应该是type="button"（用于Clear 按钮）。

总而言之，this JSFiddle 是改进版。

【讨论】：

【解决方案4】：

您是否需要清除文本区域值或其他任何内容？你的问题有点混乱。

如果你想清除你的文本区域，那么你可以使用下面的代码：

document.getElementById("body").innerHTML = "";

【讨论】：