Javascript onclick将值插入数组

Question

我有一个图像映射，定义了几个区域。我想做的是每次有人点击特定区域时将一个值添加到数组中，并将该数组实时显示在屏幕上。

在我的头部部分，我有数组(不确定这是否正确):

<script type="text/javascript">
    var numArray = [];
</script>

然后我在页面正文中的某个地方

<p class="txt"><script type="text/javascript">document.write(numArray);</script></p>

<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')">

例如，如果有人点击 1，然后点击 2，然后点击 3，我希望数组在 <p> 中显示 123 .

当我使用它时，它不会向数组添加任何内容(或者至少不显示值)。

Answer 1

向您的 JS 添加一个函数:

<script type="text/javascript">
    var numArray = [];
    function addNum(num) {
        numArray.push(num);
        document.querySelector(".txt").innerHTML = numArray.join('');
    }
</script>

从 <p> 中删除脚本标签

<p class="txt"></p>

并更新<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')">