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:
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;
}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;
}<!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.
Advertisement
Answer
- Use
==or===(strict equality) to compare, not=(assignment). - Don’t use
letwhen assigning if it is not in the same statement as the declaration, as that creates another variable inside the block and will not update the value of the variable you want to change.
if (reload == 0) {
boxarray = [
[counter, 'none']
];
}
Live Example:
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
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;
}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;
}<!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>