我已經在這個問題上停留了很長一段時間。我只是想獲得一些提示或指出正確的方向，因為我正在盡最大努力解決這個問題。
簡介：我正在研究 The Odin Project - Etch-a-Sketch。在這個問題中，我要創建一個 16x16 的網格，使用 JavaScript 創建構成該網格的 div。然后我創建了一個出現提示的按鈕，用戶輸入變成了新的網格大小。例如，如果用戶輸入為“50”，則網格從 16x16 變為 50x50。所有這些步驟都已經完成，直到獲得用戶的輸入。
問題：我不知道如何從我的用戶輸入中獲取值，并讓它改變我的網格大小。
這是我的代碼：
const btn = document.querySelector("button");
btn.addEventListener("click", function () {
var userInput = prompt(
"Please enter the amount of grids you want to be in our Etch-a-Sketch. It needs to be between 1 and 100."
);
console.log(userInput);
if (userInput > 0 && userInput < 101) {
console.log("We are going to make a grid of " userInput " divs");
} else {
console.log(
"You chose "
userInput
" and unfortunately that is too big. Please enter a value between 1 and 100."
);
}
for (i = 0; i < userInput * userInput; i ) {
let gridDiv = document.createElement("div");
gridDiv.className = "gridDiv";
document.getElementById("container").appendChild(gridDiv);
}
document.querySelectorAll(".gridDiv").forEach((v) => {
v.addEventListener("mouseover", (e) => {
e.target.style.background = "black";
});
});
});body {
display: flex;
justify-content: center;
align-items: center;
}
#btn {
display: block;
}
.gridDiv {
background-color: grey;
}
#container {
height: 500px;
width: 500px;
border: 5px solid black;
display: inline-grid;
gap: 1px 1px;
grid-template-columns: repeat(16, auto);
/*grid-template-rows: repeat(auto);*/
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8"/>
<title>The Official Odin Project Etch a Sketch</title>
<link rel="stylesheet" href="style.css"/>
<script src = "script.js" defer></script>
</head>
<header></header>
<body>
<div id="btnDiv">
<button id = "btn">Click Me</button>
</div>
<div id = "container">
</div>
</body>
</html>我不確定我是否在 CSS 中錯誤地編碼了網格，或者我是否需要在 JavaScript 中添加某些內容來更改我的網格。我知道整個專案有 100 多次演練，但我真的只是想自己完成它并使我的代碼正常作業，而不是其他人。任何幫助將不勝感激，謝謝！
我努力了
document.getElementById('container').style.gridTemplateColumns = "uerInput , auto";
它沒有用，但我不確定問題是語法問題還是其他問題。
uj5u.com熱心網友回復：
你快到了！"userInput , auto"從字面上應用于您的 CSS 屬性，因此該值最終是字串“userInput”，這不是用戶打算輸入的數字。
你可能想像這樣使用這個repeat()函式：
document.getElementById('container').style.gridTemplateColumns = `repeat(${userInput}, 1fr)`;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/534741.html
上一篇：當單獨的按鈕聚焦時如何使元素出現
下一篇：專案未居中對齊