Javascript onclick将值插入数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19712265/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript onclick insert value into array
提问by ScottD
I have an image map, with several areas defined. What I'm trying to do is get a value added to an array each time someone clicks on a specific area, and have the array displayed in real-time on the screen.
我有一个图像地图，定义了几个区域。我想要做的是每次有人点击特定区域时将一个值添加到数组中，并使数组实时显示在屏幕上。
In my head section I have the array (not sure if this is correct):
在我的头部部分，我有数组（不确定这是否正确）：
<script type="text/javascript">
var numArray = [];
</script>
Then I have somewhere in the body of the page
然后我在页面正文的某个地方
<p class="txt"><script type="text/javascript">document.write(numArray);</script></p>
The <map>areas are something like this:
这些<map>区域是这样的：
<area shape="circle" coords="129,325,72" alt="1" href="javascript:numArray.push('1')">
<area shape="circle" coords="319,325,72" alt="2" href="javascript:numArray.push('2')">
<area shape="circle" coords="510,325,72" alt="3" href="javascript:numArray.push('3')">
So for example, if someone clicks on 1, then 2, then 3, I would like the array to display 123 in the <p>.
例如，如果有人点击 1，然后点击 2，然后点击 3，我希望数组在<p>.
When I use this though, it doesn't add anything to the array (or at least the values aren't displaying).
但是，当我使用它时，它不会向数组添加任何内容（或者至少没有显示值）。
回答by azz
Add a function to your JS:
给你的 JS 添加一个函数：
<script type="text/javascript">
var numArray = [];
function addNum(num) {
numArray.push(num);
document.querySelector(".txt").innerHTML = numArray.join('');
}
</script>
Remove the script from the <p>tag
从<p>标签中删除脚本
<p class="txt"></p>
And update the <map>
并更新 <map>
<area shape="circle" coords="129,325,72" alt="1" href="javascript:addNum('1')">
<area shape="circle" coords="319,325,72" alt="2" href="javascript:addNum('2')">
<area shape="circle" coords="510,325,72" alt="3" href="javascript:addNum('3')">
回答by Asenar
document.writeis only executed when the page is loaded. To write in element, is better to use document.getElementById(that require to add an id to your <p>), and also to replace the href=by an onclick event.
document.write仅在页面加载时执行。要写入元素，最好使用document.getElementById（需要向 id 添加 id <p>），并href=用 onclick 事件替换。
This looks like this:
这看起来像这样：
<p id="pTxt" class="txt"></p>
<area shape="circle" coords="129,325,72" alt="1" href="#" onclick="addToArray(1);">
<area shape="circle" coords="319,325,72" alt="2" href="#" onclick="addToArray(2);">
<area shape="circle" coords="510,325,72" alt="3" href="#" onclick="addToArray(3);">
<script type="text/javascript">
var numArray = [];
function addToArray(num){
numArray.push(num);
document.getElementById("pTxt").innerHTML = numArray;
return false;
}
</script>
