How to push different elements in an array in JavaScript

Question

Below is my HTML doc. I want to push the number which is clicked in an array named as "number".

Right now If I click on 1 the number adds but if I click on 2 or 3 then too number 1 is added to the array.

I know the reason as it is taking the same id, but how to mae it add different numbers?

<html>
<body>
<table>

<tr>

<td id="key" onClick="addNumber()">1</td>
<td id="key" onClick="addNumber()">2</td>
<td id="key" onClick="addNumber()">3</td>

</tr>

<tr>

<td>4</td>
<td>5</td>
<td>6</td>

</tr>
</table>

</body>

<script>

 let number = [];
function addNumber() {
   var num = document.getElementById("key").innerHTML;
   number.push(num);
}
</script>
</html>

just change to different id's ... ? it's take the first element with the id it's found — OriEng
– OriEng, Commented Jun 13, 2018 at 7:43

somethinghere · Accepted Answer · 2018-06-13 08:02:32Z

1

You can pass the current element to your function like this:

onClick="/myFunction( this )"

Now you can read from this element as it's the first argument passed in:

function myFunction( element ){ .. use element... }

let number = [];

function addNumber( element ) {
   var num = element.innerHTML;
   number.push(num);
   console.log( number )
}

<table>
  <tr>

    <td onClick="addNumber(this)">1</td>
    <td onClick="addNumber(this)">2</td>
    <td onClick="addNumber(this)">3</td>

  </tr>
  <tr>

    <td>4</td>
    <td>5</td>
    <td>6</td>

  </tr>
</table>

Personally, I would approach it slightly differently, as adding onClick to your elements in HTML is mixing the interactive parts (JS) with your pure content, making this cumbersome to work on later. I would approach it purely in my script, just for separation of church and state:

let numbers = [];

function addNumber( event ){

   numbers.push( event.target.innerHTML );
   
   // Here we will print the numbers array into the output id
   
   document.getElementById( 'output' ).innerText = '[numbers]: ' + numbers.join( ', ' );
   
}

// document.querySelectorAll selects all <td> elements
// [ ... ] will spread them out into an Array, which will
// expose the forEach method of standard Arrays on your selection

[ ...document.querySelectorAll( 'td' ) ].forEach(td => {
  
  // Here we will listen for the click events
  
  td.addEventListener( 'click', addNumber );
  
})

<table>
  <tr>

    <td>1</td>
    <td>2</td>
    <td>3</td>

  </tr>
  <tr>

    <td>4</td>
    <td>5</td>
    <td>6</td>

  </tr>
</table>

<p id="output"></p>

edited Jun 13, 2018 at 8:02

answered Jun 13, 2018 at 7:46

somethinghere

17.5k2 gold badges36 silver badges47 bronze badges

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

4 Comments

Aditya Over a year ago

Hey, can we print the numbers in the same array? and also print the array's element? right now in your and my code it is printing new array on every click.

somethinghere Over a year ago

@Aditya internally this is the same array, it's just how console.log works that it prints it every time you click (since it prints the result every time you log). Internally it is still that single array stored in number. I am not sure what output you are looking for, its unclear from the question.

Aditya Over a year ago

no i got it as you said that internally its the same array.this is only the doubt.you can upvote my question if its valid.

somethinghere Over a year ago

@Aditya I also added a more best-practices example of how you could implement this. That one I also changed the output of so you get the 'its the same array' more easily!

Jaakko Mäkelä · Accepted Answer · 2018-06-13 07:44:48Z

0

Please try this one:

<html>
<body>
<table>

<tr>

<td id="key" onClick="addNumber(1)">1</td>
<td id="key" onClick="addNumber(2)">2</td>
<td id="key" onClick="addNumber(3)">3</td>

</tr>

<tr>

<td>4</td>
<td>5</td>
<td>6</td>

</tr>
</table>

</body>

<script>

 let number = [];
function addNumber(num) {
   number.push(num);
}
</script>
</html>

answered Jun 13, 2018 at 7:44

Jaakko Mäkelä

522 bronze badges

Collectives™ on Stack Overflow

How to push different elements in an array in JavaScript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related