Question

以下是我的HTML文档。我想推送一个名为“number”的数组中单击的数字。

现在如果我点击1，数字会添加，但如果我点击2或3，那么数字1也会添加到数组中。

我知道原因是因为它使用相同的ID，但如何使用它添加不同的数字？

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

Answer 1

您可以将当前元素传递给您的函数：

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中向元素添加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 ); })是将交互式部分（JS）与纯内容混合在一起，这使得后续工作变得繁琐。我会纯粹在我的剧本中接近它，只是为了分离教会和国家：

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

{{1}}

Answer 2

请尝试这个：

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

如何在JavaScript中推送数组中的不同元素

2 个答案: