I am putting together some concepts I have learned in my studies in HTML, CSS and JavaScript both formal and self-directed online. I am currently have a JavaScript issue. This occurred after I put the following code block inside an if-else statement. It seems to be losing track of "counter".

```
let boxarray = [
      [counter, 'none']  ];

```

The error message is:

> 
> TypeError: boxarray[0] is undefined
> 
> 
> 

The code pen (with full HTML and CSS) is visible here:
<https://codepen.io/j354374/pen/oNxggWZ?editors=1111>

My full code is as follows:

```js
let counter;
let html;
let boxarray = [];
var reload = 0;

function load() {
  html = '<h1>Floats and Clears</h1> <button type="button" onclick="load()">Reload!</button><br>';
  counter = 1;
  for (i = 1; i < 10; i++) {

    // With template strings (es6)
    //html = `
    //    <div class="box box${counter}"></div>
    //`; <-basic idea but expanded with concat and a multi-dimensional array.

    if (reload = 0) {
      //  block of code to be executed if the condition is true
      let boxarray = [
        [counter, 'none']
      ];

    } else {

      console.log("reloaded");

      /* will eventually have something like:
      let boxarray = [
          [counter, document.getElementById("box-" + counter + "properties")]
      ];*/
    }

    html = html.concat(`<div class="box box${counter} box-${boxarray[0][1]}">
<select name="box${counter}-properties" id="box${counter}-properties">
<option value="none">none</option>
<option value="left">left</option>
<option value="right">right</option>
<option value="clear">clear</option>
</select></div>`);
    counter++;
  }

  document.body.innerHTML = html;
  reload = 1;
}
```

```css
html {
  background: lightblue;
}

.box {
  width: 100px;
  height: 100px;
}

.box1 {
  background: pink;
}

.box2 {
  background: red;
}

.box3 {
  background: firebrick;
}

.box4 {
  background: orange;
}

.box5 {
  background: yellow;
}

.box6 {
  background: lime;
}

.box7 {
  background: green;
}

.box8 {
  background: blue;
}

.box9 {
  background: purple;
}

.box-none {
  float: none;
}

.box-left {
  float: left;
}

.box-right {
  float: right;
}

.box-clear {
  clear: both;
}
```

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Floats and Clears</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <h1>Floats and Clears</h1>
  <button type="button" onclick="load()">Load!</button><br>
  <script src="js/boxes.js"></script>
</body>

</html>
```

I am learning JavaScript so any assistance would be greatly appreciated. This is not a class or formal assignment just something I am doing to help myself learn. I feel I am very close to having it working.