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

Answer 2

document.write仅在加载页面时执行。要在元素中写入，最好使用document.getElementById（需要向<p>添加ID），还要用onclick事件替换href=。

这看起来像这样：

<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>

Javascript onclick将值插入数组

2 个答案: