Как вставить разные элементы в массив в JavaScript - PullRequest
Новая
       1

Как вставить разные элементы в массив в JavaScript

0 голосов
/ 13 июня 2018

Ниже мой HTML документ.Я хочу нажать число, которое щелкается в массиве с именем «число».

Прямо сейчас Если я нажимаю 1, число добавляется, но если я нажимаю 2 или 3, то тоже число 1 добавляется кмассив.

Я знаю причину, так как он принимает тот же идентификатор, но как его добавить разные числа? 

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

Ответы [ 2 ]

0 голосов
/ 13 июня 2018

Вы можете передать текущий элемент вашей функции следующим образом: 

onClick="/myFunction( this )"

Теперь вы можете читать из этого элемента, так как это первый аргумент, переданный в: 

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>

Лично я бы подошел к этому немного иначе, так как добавление onClick к вашим элементам в HTML смешивает интерактивные части (JS) с вашим чистым контентом,делая это громоздким, чтобы работать позже.Я бы подошел к этому чисто в моем сценарии, просто для разделения церкви и государства: 

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>
0 голосов
/ 13 июня 2018

Пожалуйста, попробуйте это: 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...