Javascript onclick insert value into array

Question

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:

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

When I use this though, it doesn't add anything to the array (or at least the values aren't displaying).

use a for loop to go through the array printing out the values as you go or try numArray.toString(); — Millard
– Millard, Commented Oct 31, 2013 at 16:50

azz · Accepted Answer · 2013-10-31 17:03:55Z

5

Add a function to your 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 class="txt"></p>

And update the <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')">

edited Oct 31, 2013 at 17:03

answered Oct 31, 2013 at 16:54

azz

5,9703 gold badges33 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ScottD Over a year ago

Works great. One question: Is there any way to get it to add numbers without commas in between? Right now it's showing 1,2,3 not 123.

azz Over a year ago

Yeah, use numArray.join(''); [Updated the answer to reflect that]

Asenar · Accepted Answer · 2013-10-31 17:06:32Z

1

document.write is 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.

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>

edited Oct 31, 2013 at 17:06

answered Oct 31, 2013 at 16:58

Asenar

7,0863 gold badges44 silver badges53 bronze badges

3 Comments

azz Over a year ago

isn't this almost exactly the same as my answer?

Asenar Over a year ago

no, yours is much better because of the join(). Sorry I didn't see you answered before me

azz Over a year ago

No problem, just making sure I didn't miss anything.

Collectives™ on Stack Overflow

Javascript onclick insert value into array

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related