Javascript로 그리드를 생성하려고합니다. 사용자는 그리드의 크기를 설정하기 위해 숫자를 입력해야합니다. 자바 스크립트 코드와 CSS에 특정 번호를 삽입하여 코드를 실행하면 잘 작동하지만 변수로 번호를 변경하고 사용자 입력 만 사용하자마자 이상한 그리드가 나타납니다.
다음은 코드입니다.
const container = document.querySelector(".container");
//CREATE GRID
function grid (size) {
size = prompt("How many squares wide do you want your grid to be?");
container.style.gridTemplateColumns = "repeat(7, 1ft)";
for (let i = 0; i < size; i++) {
for (let j = 0; j < size; j++) {
const square = document.createElement("div");
square.classList.add("square");
square.style = "background-color: white; border: 1px solid black";
container.appendChild(square);
}
}
}
grid(7); .container {
display: grid;
grid-template-columns: repeat(7, 1fr);
width: 500px;
height: 500px;
border: 2px dotted lightgray;
}<main class="container"/>이 경우 사용자 입력으로 7을 선택하면 작동하지만 7을 "크기"로 바꾸면 작동하지 않습니다.
다음은 귀하의 시도와 매우 유사한 예제 솔루션입니다. 코드 조각에서 오타 ft를 수정했습니다 fr. 이것은 보간을 위해 역틱 문자열 (템플릿 리터럴) 을 사용하지만 +문자열을 함께 결합 하는 데 사용할 수도 있습니다 .
const container = document.querySelector(".container");
//CREATE GRID
function grid(size) {
container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
for (let row = 0; row < size; row++) {
for (let column = 0; column < size; column++) {
const square = document.createElement("div");
square.classList.add("square");
container.appendChild(square);
}
}
}
size = prompt("How many squares wide do you want your grid to be?");
grid(size);.container {
display: grid;
width: 500px;
height: 500px;
border: 2px dotted lightgray;
}
.container>.square {
background-color: white;
border: 1px solid black
}<main class="container"></main>다음은 CSS 변수를 대신 사용하는 예입니다.
const container = document.querySelector(".container");
//CREATE GRID
function grid(size) {
container.style.setProperty('--grid-size', size);
for (let row = 0; row < size; row++) {
for (let column = 0; column < size; column++) {
const square = document.createElement("div");
square.classList.add("square");
container.appendChild(square);
}
}
}
size = prompt("How many squares wide do you want your grid to be?");
grid(size);.container {
display: grid;
width: 500px;
height: 500px;
border: 2px dotted lightgray;
grid-template-columns: repeat(var(--grid-size), 1fr);
}
.container>.square {
background-color: white;
border: 1px solid black
}<main class="container"></main>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다