Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />
    <title>Learning React Chapter 2 Samples</title>
  </head>
  <body>
    <h1>Click on a Box</h1>
    <div id="container"></div>
  </body>
</html>
 
#container {
  display: flex;
  justify-content: space-around;
}
#container>div {
  height: 5em;
  width: 5em;
  background-color: purple;
}
 
// Problem, counters are not scoped to for loop blocks
var div, 
    container = document.getElementById('container')
for (var i=0; i<5; i++) {
  div = document.createElement('div')
  div.onclick = function() {
      alert('This is box #' + i)
   }
  container.appendChild(div)
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
moonhighwaypro
0viewers