HTML, CSS 및 JavaScript에 대한 연구에서 배운 몇 가지 개념을 공식 및 자기 주도 온라인에서 모으고 있습니다. 현재 JavaScript 문제가 있습니다. 이것은 if-else 문 안에 다음 코드 블록을 넣은 후에 발생했습니다. "카운터"를 잃어버린 것 같습니다.
let boxarray = [
[counter, 'none'] ];
오류 메시지는 다음과 같습니다.
TypeError : 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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다