javascript 中的 Onclick = function()，显示“未捕获的类型错误”

Question

我正在尝试做类似下面的事情。

我的站点中有 5 个按钮。希望是如果用户按下任何按钮，它会产生缩小的效果。问题是，当我单击其中一个按钮时，我不希望所有按钮都缩小，所以我采用了这种方法，但它向我显示了一个错误。那么如何才能达到这种效果？

 items = document.querySelectorAll('.tags'); for (var iterator = 0; iterator < items.length; iterator++){ items[iterator].onclick = function () { items[iterator].style.transform = 'scale(0.9, 0.9)'; } }

 <button class='tags'>button1</button> <button class='tags'>button2</button> <button class='tags'>button3</button> <button class='tags'>button4</button> <button class='tags'>button5</button>

Answer 1

使用this.style.transform而不是this.style.transform

 items = document.querySelectorAll('.tags'); for (var iterator = 0; iterator < items.length; iterator++){ items[iterator].onclick = function (iterator) { this.style.transform = 'scale(0.9, 0.9)'; } }

 <button class='tags'>button1</button> <button class='tags'>button2</button> <button class='tags'>button3</button> <button class='tags'>button4</button> <button class='tags'>button5</button>

Answer 2

您也可以使用这种方法，

 function animateInit(event){ event.target.style.transform = 'scale(0.9, 0.9)'; }

 <button class='tags' onclick="animateInit(event)">button1</button> <button class='tags' onclick="animateInit(event)">button2</button> <button class='tags' onclick="animateInit(event)">button3</button> <button class='tags' onclick="animateInit(event)">button4</button> <button class='tags' onclick="animateInit(event)">button5</button>

Answer 3

不幸的是，我看不到您的所有代码。 问题必须出在用var声明的iterator 。 我只是更改了let的var并且对我来说工作正常。

 items = document.querySelectorAll('.tags'); for (let iterator = 0; iterator < items.length; iterator++){ items[iterator].onclick = function () { items[iterator].style.transform = 'scale(0.9, 0.9)'; } }

 <button class='tags'>button1</button> <button class='tags'>button2</button> <button class='tags'>button3</button> <button class='tags'>button4</button> <button class='tags'>button5</button>