Question

我有一个（绘图）应用程序，该应用程序有一个要绘制的区域，而在该区域内，我有一个网格布局，其中当然有行和列。问题是，我的行比行多，例如，当布局的大小为16x16时，我有16列和15行。我用连接到HTML文件的JS编写了脚本。

    const container = document.querySelector('.container');
    const mainContainer = document.querySelector('.main-container');
    const resizeButton = document.querySelector('.button1');
    const randomButton = document.querySelector('.button2');
    const clearButton = document.querySelector('.button3');
    const boxWidth = 400; //the width of the drawing area is 400px
    let randomBrush;
    let size, nsize;
    let init = (function() {
        randomBrush = false;
        const defSize = 16;
        nsize = defSize;
        mainContainer.style.display = 'grid';
        mainContainer.style.gridTemplateColumns = '1fr 1fr 1fr';
        container.style.gridColumnStart = '2';
        container.style.gridRowStart = '3';
        container.style.display = 'grid';
        container.style.gridTemplateRows = 'auto';
        container.style.width = '350px';
        container.style.border = '2px solid gray';
        container.style.justifySelf = 'center';
        randomButton.addEventListener('click', function() { 
            if (randomBrush === false) {
                randomBrush = true; 
            } else {
                randomBrush = false; 
            }
        });
        resizeButton.addEventListener('click', resize);
        clearButton.addEventListener('click', clear);
        draw(defSize);
    })();
    function draw(n) {
        size = n;
        container.style.gridTemplateColumns = 'repeat(' + size + ', 1fr)';
        container.style.gridAutoColumns = boxWidth/size + 'px';
        container.style.gridAutoRows = boxWidth/size + 'px';
        for(let i = 0; i < size*size; i++) {
            let element = document.createElement('div');
            element.textContent = '';
            element.onmouseenter = function() {
                if (!element.classList.contains('colored')) {
                    if (randomBrush) {
                        element.style.background = randomColor();
                    } else {
                        element.style.background = 'white';
                    }
                    element.classList.add('colored');
                }
            };
            container.appendChild(element);
        }
    }
    function randomColor() {
        let r, g, b;
        r = Math.floor(Math.random() * 255);
        g = Math.floor(Math.random() * 255);
        b = Math.floor(Math.random() * 255);
        string = 'rgb(' + r + ', ' + g + ', ' + b + ')';
        return string;
    }
    function resize() {
        container.innerHTML = '';
        nsize = prompt('What should be the new size of the drawing are? (E.g type "32" for 32x32)');
        if (nsize > 0 && nsize < 129) {
            draw(nsize);
        } else {
            alert('Please enter a num between 0 and 128');
            resize();
        }
    }
    function clear() {
        container.innerHTML = '';
        draw(nsize);
    }

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
        <title>Etch-a-sketch</title>
    </head>
    <body>
        <div class='main-container'>
            <div class="header">
                <h1>Created by chriskoder</h1>
            </div>
            <div class="buttons">
                <button class="button1">Resize</button>
                <button class="button2">Random</button>
            </div>
            <div class="container"></div>
            <div class='button-under'>
                <button class="button3">Clear</button>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
    </html>

Answer 1

第一行存在，但高度为0，可能是这里的问题

react-navigation-stack

尝试赋予它们相同的值-2和2，否则，请进一步了解网格设置

Answer 2

问题在于，只要计数器的计数小于size*size，循环就会继续进行，这意味着如果输入了10，循环将进行99次，不是100。

将行更改为：

for(let i = 0; i <= (size*size); i++) {

const container = document.querySelector('.container');
    const mainContainer = document.querySelector('.main-container');
    const resizeButton = document.querySelector('.button1');
    const randomButton = document.querySelector('.button2');
    const clearButton = document.querySelector('.button3');
    const boxWidth = 400; //the width of the drawing area is 400px
    let randomBrush;
    let size, nsize;
    let init = (function() {
        randomBrush = false;
        const defSize = 16;
        nsize = defSize;
        mainContainer.style.display = 'grid';
        mainContainer.style.gridTemplateColumns = '1fr 1fr 1fr';
        container.style.gridColumnStart = '2';
        container.style.gridRowStart = '3';
        container.style.display = 'grid';
        container.style.gridTemplateRows = 'auto';
        container.style.width = '350px';
        container.style.border = '2px solid gray';
        container.style.justifySelf = 'center';
        randomButton.addEventListener('click', function() { 
            if (randomBrush === false) {
                randomBrush = true; 
            } else {
                randomBrush = false; 
            }
        });
        resizeButton.addEventListener('click', resize);
        clearButton.addEventListener('click', clear);
        draw(defSize);
    })();
    function draw(n) {
        size = n;
        container.style.gridTemplateColumns = 'repeat(' + size + ', 1fr)';
        container.style.gridAutoColumns = boxWidth/size + 'px';
        container.style.gridAutoRows = boxWidth/size + 'px';
        for(let i = 0; i <= (size*size); i++) {
            let element = document.createElement('div');
            element.textContent = '';
            element.onmouseenter = function() {
                if (!element.classList.contains('colored')) {
                    if (randomBrush) {
                        element.style.background = randomColor();
                    } else {
                        element.style.background = 'white';
                    }
                    element.classList.add('colored');
                }
            };
            container.appendChild(element);
        }
    }
    function randomColor() {
        let r, g, b;
        r = Math.floor(Math.random() * 255);
        g = Math.floor(Math.random() * 255);
        b = Math.floor(Math.random() * 255);
        string = 'rgb(' + r + ', ' + g + ', ' + b + ')';
        return string;
    }
    function resize() {
        container.innerHTML = '';
        nsize = prompt('What should be the new size of the drawing are? (E.g type "32" for 32x32)');
        if (nsize > 0 && nsize < 129) {
            draw(nsize);
        } else {
            alert('Please enter a num between 0 and 128');
            resize();
        }
    }
    function clear() {
        container.innerHTML = '';
        draw(nsize);
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
        <title>Etch-a-sketch</title>
    </head>
    <body>
        <div class='main-container'>
            <div class="header">
                <h1>Created by chriskoder</h1>
            </div>
            <div class="buttons">
                <button class="button1">Resize</button>
                <button class="button2">Random</button>
            </div>
            <div class="container"></div>
            <div class='button-under'>
                <button class="button3">Clear</button>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
    </html>

Answer 3

好的，斯科特·马库斯（Scott Marcus）的回答使我更接近真正的解决方案。最终的解决方案是将大小本身添加到大小*大小中。为什么？因为正如Dmitry Reutov回答的那样，第一行在那里，但是没有高度，所以我应该添加一整行，实际上是17（对于大小为16），但是由于第一行的高度不可见，只有16个可见。

const container = document.querySelector('.container');
const mainContainer = document.querySelector('.main-container');
const resizeButton = document.querySelector('.button1');
const randomButton = document.querySelector('.button2');
const clearButton = document.querySelector('.button3');
const boxWidth = 400; //the width of the drawing area is 400px
let randomBrush;
let size, nsize;
let init = (function() {
    randomBrush = false;
    const defSize = 16;
    nsize = defSize;
    mainContainer.style.display = 'grid';
    mainContainer.style.gridTemplateColumns = '1fr 1fr 1fr';
    container.style.gridColumnStart = '2';
    container.style.gridRowStart = '5';
    container.style.display = 'grid';
    container.style.gridTemplateRows = 'auto';
    container.style.width = '350px';
    container.style.border = '2px solid gray';
    container.style.justifySelf = 'center';
    randomButton.addEventListener('click', function() { 
        if (randomBrush === false) {
            randomBrush = true; 
        } else {
            randomBrush = false; 
        }
    });
    resizeButton.addEventListener('click', resize);
    clearButton.addEventListener('click', clear);
    draw(defSize);
})();
function draw(n) {
    size = n;
    container.style.gridTemplateColumns = 'repeat(' + size + ', 1fr)';
    container.style.gridAutoColumns = boxWidth/size + 'px';
    container.style.gridAutoRows = boxWidth/size + 'px';
    for(let i = 0; i < (size*size)+size; i++) {
        let element = document.createElement('div');
        element.textContent = '';
        element.onmouseenter = function() {
            if (!element.classList.contains('colored')) {
                if (randomBrush) {
                    element.style.background = randomColor();
                } else {
                    element.style.background = 'white';
                }
                element.classList.add('colored');
            }
        };
        container.appendChild(element);
    }
}
function randomColor() {
    let r, g, b;
    r = Math.floor(Math.random() * 255);
    g = Math.floor(Math.random() * 255);
    b = Math.floor(Math.random() * 255);
    string = 'rgb(' + r + ', ' + g + ', ' + b + ')';
    return string;
}
function resize() {
    container.innerHTML = '';
    nsize = prompt('What should be the new size of the drawing are? (E.g type "32" for 32x32)');
    if (nsize > 0 && nsize < 129) {
        draw(nsize);
    } else {
        alert('Please enter a num between 0 and 128');
        resize();
    }
}
function clear() {
    container.innerHTML = '';
    draw(nsize);
}

为什么行数比网格中的列数少1？

3 个答案: