如何使我的按鈕清除內容並創建新網格？
[英]How do I make my button clear content and create a new grid?
問題描述
伙計們，我正在 TOP 上進行 etch-a 草圖項目，我被困在我必須創建一個按鈕的部分，該按鈕將清除當前網格並向用戶發送一個彈出窗口，詢問每邊的方格數對於新網格。這是我下面的代碼。 我需要有關如何正確制作按鈕 function 的幫助。 謝謝
const container = document.getElementById('container'); let rows = document.getElementsByClassName('gridRow'); let cells = document.getElementsByClassName('cell'); defaultGrid(); //creates a default grid sized 16x16 function defaultGrid() { makeRows(16); makeColums(16); } function makeRows(rowNum) { for(let r = 0; r < rowNum; r++) { let row = document.createElement('div'); container.appendChild(row).className = "gridRow"; } } // creates columns function makeColums(cellNum) { for (i = 0; i < rows.length;i++) { for (j = 0; j < cellNum; j++) { let newCell = document.createElement("div"); rows[j].appendChild(newCell).className = "cell"; } } } for(let i= 0; i < rows.length; i++) { rows[i].addEventListener('mouseover', e => e.target.classList.add('hoverColor')) } for(let i= 0; i < rows.length; i++) { rows[i].addEventListener('mouseout', e => e.target.classList.add('hoverColor3')) } for(let i= 0; i < cells.length; i++) { cells[i].addEventListener('mouseover', e => e.target.classList.add('hoverColor2')) } for(let i= 0; i < cells.length; i++) { cells[i].addEventListener('mouseout', e => e.target.classList.add('hoverColor3')) } const button = document.getElementById('Btn'); button.addEventListener('click', getNewGrid); button.addEventListener('click', theNewGrid); function getNewGrid() { for(let i= 0; i < cells.length; i++) { cells[i].remove(); } for(let i= 0; i < rows.length; i++) { rows[i].remove(); } } function theNewGrid(){ let number= prompt("How many squares per side for the new grid?" ); for(number=0; number<=100; number++) { } getNewGrid(); };
.gridRow { border: 1px solid black; min-width: 20px; min-height: 20px; display: inline-block; margin-right: 2px; }.cell { border: 1px solid black; min-width: 20px; min-height: 20px; display: inline-block; margin-right: 2px; }.hoverColor { background-color: pink }.hoverColor2 { background-color: blueviolet; }.hoverColor3 { background-color: white; transition:3s; } #Btn { margin-bottom: 50px; margin-top: 20px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Etch-a-Sketch</title> <link rel="stylesheet" href= "etch.css"> </head> <body> <button id = "Btn">New Grid</button> <div id = 'container'></div> </body> </html>
1 個解決方案
解決方案1
0 2022-02-02 11:54:26
我嘗試先編輯您的帖子，因為縮進使其難以閱讀。 編輯必須得到社區的批准，所以我將我的編輯粘貼在下面，但這次我要添加評論並可能是解決方案：
const container = document.getElementById('container'); let rows = document.getElementsByClassName('gridRow'); let cells = document.getElementsByClassName('cell'); createGrid(); //creates a grid sized 16x16 by default function createGrid(size = 16) { makeRows(size); } function makeRows(size) { for(let r = 0; r < size; r++) { let row = document.createElement('div'); container.appendChild(row).className = "gridRow"; row.addEventListener('mouseover', e => e.target.classList.add('hoverColor')); row.addEventListener('mouseout', e => e.target.classList.add('hoverColor3')) makeColumns(row, size); } } // creates columns function makeColumns(row, cellNum) { for (j = 0; j < cellNum; j++) { let newCell = document.createElement("div"); newCell.addEventListener('mouseover', e => e.target.classList.add('hoverColor2')); newCell.addEventListener('mouseout', e => e.target.classList.add('hoverColor3')); row.appendChild(newCell).className = "cell"; } } const button = document.getElementById('Btn'); // button.addEventListener('click', getNewGrid); // not here button.addEventListener('click', theNewGrid); function getNewGrid() { container.innerText = ''; // clear everything } function theNewGrid(){ getNewGrid(); let number = prompt("How many squares per side for the new grid?" ); // below for loop does nothing // for(number=0; number<=100; number++) { // } createGrid(number); // pass the number as an argument };
.gridRow { min-width: 20px; min-height: 20px; margin-right: 2px; }.cell { border: 1px solid black; min-width: 20px; min-height: 20px; display: inline-block; margin-right: 2px; }.hoverColor { background-color: pink }.hoverColor2 { background-color: blueviolet; }.hoverColor3 { background-color: white; transition:3s; } #Btn { margin-bottom: 50px; margin-top: 20px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Etch-a-Sketch</title> <link rel="stylesheet" href= "etch.css"> </head> <body> <button id="Btn">New Grid</button> <div id="container"></div> </body> </html>
如何讓我的按鈕清除前兩個表單然后再次單擊清除最后一個表單？
[英]How do I make my button clear the first two forms then when clicked again clear the last form?
當我選擇不同的值時，如何使我的單選按鈕再次變得清晰？
[英]how do I make my radio button become clear again when I pick a different value?
Angular UI Grid：如何從第一個ui網格中的按鈕看到第二個ui網格？
[英]Angular UI Grid: How do I make a second ui grid visible from a button in the first ui grid?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.