JavaScript:let TypeError:用于 if 语句中的多维数组

我正在整理我在学习HTML，CSS和JavaScript时学到的一些概念，包括正式的和自我指导的在线。我目前有一个JavaScript问题。这发生在我将以下代码块放入 if-else 语句中之后。它似乎正在失去"计数器"的跟踪。

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

错误消息是：

类型错误：boxarray[0] 未定义

代码笔(具有完整的HTML和CSS)在此处可见： https://codepen.io/j354374/pen/oNxggWZ?editors=1111

我的完整代码如下：

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>

我正在学习JavaScript，所以任何帮助将不胜感激。这不是课堂或正式作业，只是我正在做的事情，以帮助自己学习。我觉得我非常接近让它工作。

使用==或===(严格相等)进行比较，而不是=(赋值)。
如果let与声明不在同一语句中，则在分配时不要使用它，因为这会在块内创建另一个变量，并且不会更新要更改的变量的值。

if (reload == 0) {
boxarray = [
[counter, 'none']
];
}

现场示例：

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>

> 您的let在嵌套作用域内定义另一个boxarray，以便外部boxarray保持不变。此外，(reload = 0)始终为 false，因为它是赋值操作。您希望(reload == 0)检查reload是否等于0。

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

相关内容

最新更新

热门标签：