hac13 hac13 - 6 months ago 8
HTML Question

How can I update a div that is clicked on in my javascript code

My goal is to click on a specific tile (div) from the many tiles created by the loop, and have the background color of it change along with increment the value within that specific div.

See the following code:

<!DOCTYPE html>
<html>
<body>
</body>

<script>
var id = 0; // variable for generating unique id
var x = 0;

function cdiv(ele) {
var div = document.createElement("div");
div.innerHTML = 'div' + id;
div.id = 'div' + id++; // get unique id and increment id value
div.style.width = "10px";
div.style.height = "10px";
div.style.background = "red";
div.innerHTML = x;

ele.appendChild(div);
}

var div = document.createElement("div");
div.style.width = "1000px"; ///10 times of inner divs
div.style["overflow-x"]= "visible"; // to show overflow
document.body.appendChild(div);
for (i = 0; i < 10; i++) {
for (b = 0; b < 10; b++) {
cdiv(div);
}
}

function clr(a) {
a.style.background = "yellow";
a.innerHTML += 1
}

</script>

</html>


Here, I have set up a function 'clr()' to change the color, but I do not know how to go into the div's tag and add a function attribute. I would be able to do other things such as mouseover once I figure that.

Secondly, the value of x needs to be incremented as the tile is clicked. That is also part of the 'clr()' function I have set up.

Dar Dar
Answer

You can get the div's id using a click event handler.

  div.addEventListener("click", clr);

Once that div is clicked, the clr function is fired with an event. Using that event, you can get the clicked element's id using the currentTarget property:

  var clickedElement = document.getElementById(e.currentTarget.id);

Then, once you get that element id, you can also access the div's properties such as innerHTML by:

var currentXValue = clickedElement.innerHTML;

And then you are able to increment by doing so.

var id = 0; // variable for generating unique id
var x = 0;

function cdiv(ele) {
  var div = document.createElement("div");
  div.innerHTML = 'div' + id;
  div.id = 'div' + id++; // get unique id and increment id value
  div.style.width = "10px";
  div.style.height = "10px";
  div.style.background = "red";
  div.innerHTML = x;
  div.addEventListener("click", clr); // this is the click event
  ele.appendChild(div);
}

var div = document.createElement("div");
div.style.width = "1000px"; ///10 times of inner divs
div.style["overflow-x"] = "visible"; // to show overflow
document.body.appendChild(div);
for (i = 0; i < 10; i++) {
  for (b = 0; b < 10; b++) {
    cdiv(div);
  }
}

function clr(e) {
  var clickedElement = document.getElementById(e.currentTarget.id); // gets the clicked element's id 
  var currentXValue = clickedElement.innerHTML; // gets the clicked element's current value
  clickedElement.style.background = "yellow";
  currentXValue++ // increments clicked element's current value
  clickedElement.innerHTML = currentXValue; // sets clicked element's new value
}

Here's the jsFiddle: https://jsfiddle.net/94atctxf/

I hope I understood it correctly.