Onclick = function() in javascript, showing "uncaught type error"

Question

I am trying to do something like below.

I have 5 buttons in my site.the desire is if user press any of the button, it makes an effect of scaling down.the issue is,i don't want want all of them scale down when i click one of the buttons, so i came with this approach, but its showing me an error.so how can achieve this effect?

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>

just use this in your function?

Flash Thunder
– Flash Thunder

2020-09-06 14:54:09 +00:00
Commented Sep 6, 2020 at 14:54 — Flash Thunder
– Flash Thunder, Commented Sep 6, 2020 at 14:54

Sascha A. · Accepted Answer · 2020-09-06 14:53:11Z

4

Use this.style.transforminstead of 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>

answered Sep 6, 2020 at 14:53

Sascha A.

4,6463 gold badges17 silver badges34 bronze badges

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

Comments

Nikhil Singh · Accepted Answer · 2020-09-06 14:57:21Z

1

You can also use this approach,

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>

answered Sep 6, 2020 at 14:57

Nikhil Singh

1,6301 gold badge16 silver badges25 bronze badges

Comments

Daniel Pantalena · Accepted Answer · 2020-09-06 15:10:45Z

1

Unfortunately I can not see all your code. The problem must be in the iterator declared with var. I just changed the var for let and works fine for me.

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>

edited Sep 6, 2020 at 15:10

answered Sep 6, 2020 at 15:09

Daniel Pantalena

4272 silver badges9 bronze badges

Collectives™ on Stack Overflow

Onclick = function() in javascript, showing "uncaught type error"

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related