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

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>