在javascript中，Onclick = function()，显示"uncaught type error"

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中。我刚刚把var换成了let，对我来说效果很好。

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>