javascript create div with unique onclick event

Question

I have managed to create divs (I use css to make them blue circles) dynamically and add unique id attributes dynamically too, I'd like to also add unique onclick events also but I am struggling to manage it. Here is my JavaScript code followed by the HTML I'm working with:

var i = 0;

function addCircles(click) {
  var numberOfCircles = document.getElementById('setSize').value;
  var startFromOne = numberOfCircles + 1 - 81;
  document.getElementById('debug').innerHTML = numberOfCircles;

  for (i = 1; i < startFromOne; i++) {
    var element = document.createElement('div');
    element.id = "circle" + i;
    element.className = "circle";
 // element.onclick = attack(key);
    document.getElementById('gamecanvas').appendChild(element);
    document.getElementById("circle" + i).innerHTML = i;
  }
}

function attack(key) {
  if (key === 1) {
    document.getElementById('circle1').style.backgroundColor = purple;
  }
/* This is a tester, if circle1 turns purple onclick I'm good to go. */
}

I want to be able to click the divs (blue circles) and change their colour.

Where are you getting the variable key from? Also if you write attack(key), it will execute the function, rather than binding it to an event handler. — JCOC611
– JCOC611, Commented Jan 29, 2015 at 22:24
You can use getElementsByClassName('circle') which creates a NodeList that you can loop through and attach a click event to. — Wild Beard
– Wild Beard, Commented Jan 29, 2015 at 22:25
Try to use "function attack(event)" and then in "event.target" you should have the element that has been clicked and in consecuence in "event.target.id" the id of the element. — daniegarcia254
– daniegarcia254, Commented Jan 29, 2015 at 22:29
I want to give each div I make onclick="attack(n)" where n will be increments of 1, so the first div with id="circle1" will have onclick="attack(1)" and then id="circle2" will have onclick="attack(2)" and so on. :) Forgive me I'm very new to this! — apostle
– apostle, Commented Jan 30, 2015 at 0:01

Wild Beard · Accepted Answer · 2015-01-29 22:43:06Z

1

This will assign the doAttack() function to all your elements with the class circle. Then we just change the color of the circle inside the function!

var circles = document.getElementsByClassName('circle');

for ( var x in circles ) {
    circles[x].onclick = doAttack;   
}

function doAttack() {
    this.style.background = 'purple';
}

Edit

Here is a Demo

If you wish to do an if statement inside your function just compare the this.id to whatever you want. if ( this.id === 'circle1' ) { .. }

answered Jan 29, 2015 at 22:43

Wild Beard

2,9371 gold badge14 silver badges24 bronze badges

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

Comments

daniegarcia254 · Accepted Answer · 2015-01-30 15:28:24Z

0

Another solution is to add an onclick event to the main div:

<div onclick="doAttack(event)">
    <div class="circle" id="circle1">
    </div>
    <div class="circle" id="circle2">
    </div>
    <div class="circle" id="circle3">
    </div>
    <div class="circle" id="circle4">
    </div>
</div>

And then in your doAttack function:

function doAttack(event) {
    document.getElementById(event.target.id).style.backgroundColor = 'red';
}

answered Jan 30, 2015 at 15:28

daniegarcia254

1,2074 gold badges20 silver badges38 bronze badges

Collectives™ on Stack Overflow

javascript create div with unique onclick event

2 Answers 2

Edit

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related