CODEWITHSUNDEEP
javascripthtmlcssdomgrid
Szarlotka
Szarlotka

Reputation: 27

.style.gridTemplateColumns doesn't seem to work

I want someone to choose a grid and then I would display different types of grid. I also have an error that says Uncaught TypeError: Cannot read property 'style' of null but I do have my script at the end of the body so I don't know what the problem may be. Here's a link to my codepen: https://codepen.io/diana-larussa/pen/MWjQaPP?editors=1010

Upvotes: 0

Views: 1460

Answers (2)

gscHeartA
gscHeartA

Reputation: 44

I have updated the code you provided as follow:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
</head>

<body>
    <main>
        <span class="score">SCORE: </span>
        <span class="time" id="timer">TIME: 500</span>

        <form>
            <label for="grid">Choose a grid:</label>
            <select id="grid" name="grid" onchange="onSelectChanged();">
                <option value="first" id="first">5x5</option>
                <option value="second" id="second">6x6</option>
                <option value="third" id="third">10x7</option>
            </select>
        </form>

        <button class="start">Start</button>
        <button class="pause">Pause</button>
        <button class="stop">Stop</button>
    </main>

    <section class="container"></section>

    <script src="script.js"></script>
</body>

</html>

CSS

* {
    box-sizing: border-box;
    font-family: 'Orbitron', sans-serif;
}

body {
    background-color: #D2DBEE;
}

main {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#number {
    font-variant-numeric: tabular-nums;
}

section.container {
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(10, 7vmax);
    grid-template-rows: repeat(10, 7vmax);
    column-gap: 0.2vmax;
    row-gap: 0.2vmax;
    justify-content: center;
    align-items: center;
}

div {
    height: 7vmax;
    width: 7vmax;
    border-radius: 2px;
    background-color: #6d5dfc;
    box-shadow: inset 9.91px 9.91px 15px #6355E5, inset -9.91px -9.91px 15px #7765FF;
    cursor: pointer;
}

button {
    padding: 1.3em;
    background-color: #6d5dfc;
    color: #fff;
    box-shadow: inset 9.91px 9.91px 15px #6355E5, inset -9.91px -9.91px 15px #7765FF;
    border: none;
    border-radius: 10px;
    font-family: 'Orbitron', sans-serif;
    cursor: pointer;
}

button.start {
    background: #049f6b;
    box-shadow: inset 9.91px 9.91px 15px #049161, inset -9.91px -9.91px 15px #04AD75;
}

button.pause {
    background: #b2b1ae;
    box-shadow: inset 9.91px 9.91px 15px #A2A19E, inset -9.91px -9.91px 15px #C2C1BE;
}

button.stop {
    background: #9f040e;
    box-shadow: inset 9.91px 9.91px 15px #91040D, inset -9.91px -9.91px 15px #AD040F;
}

JS

const container = document.querySelector(".container")

//5x5 GRID
function changeToFirst(){
    let Number = 25
    let divs

    for (let index = 0; index < Number; index++) {
        divs = document.createElement("div")
        container.appendChild(divs)
    }

    container.style.gridTemplateColumns = "repeat(5, 7vmax)";
    container.style.gridTemplateRows = "repeat(5, 7vmax)";
}

//6x6 GRID

function changeToSecond() {
    let Number = 36
    let divs

    for (let index = 0; index < Number; index++) {
        divs = document.createElement("div")
        container.appendChild(divs)
    }

    container.style.gridTemplateColumns = "repeat(6, 7vmax)";
    container.style.gridTemplateRows = "repeat(6, 7vmax)";
}

//10x7 GRID

function changeToThird() {
    let Number = 70
    let divs

    for (let index = 0; index < Number; index++) {
        divs = document.createElement("div")
        container.appendChild(divs)
    }

    container.style.gridTemplateColumns = "repeat(10, 7vmax)";
    container.style.gridTemplateRows = "repeat(10, 7vmax)";
}


function onSelectChanged(){
    let value = document.querySelector("#grid").value
    if(value === "first"){
        changeToFirst();
    }
    if(value === "second"){
        changeToSecond();
    }
    if(value === "third"){
        changeToThird();
    }
}

changeToFirst();







/*-------------------------------TIMER-----------------------*/

const startButton = document.querySelector(".start")
const stopButton = document.querySelector(".stop")
const pauseButton = document.querySelector(".pause")
let stoper, ttl = 500, pauseCounter = 0

function startTimer() {
    stoper = setInterval(timer, 100)
}

function timer() {
    ttl--
    document.querySelector(".time").innerHTML = "TIME: " + ttl
    if (ttl == 0) stop()
}

function stop() {
    clearInterval(stoper)
    ttl = 500
    document.querySelector(".time").innerHTML = "TIME: " + ttl
}

function pause() {
    if (pauseCounter == 0) {
        clearInterval(stoper)
        pauseCounter = 1
        pauseButton.innerHTML = "RESUME"
    } else {
        stoper = setInterval(timer, 100)
        pauseCounter = 0
        pauseButton.innerHTML = "PAUSE"
    }
}

startButton.addEventListener("click", startTimer)
stopButton.addEventListener("click", stop)
pauseButton.addEventListener("click", pause)

Upvotes: 1

gscHeartA
gscHeartA

Reputation: 44

seems you miss a selector '.' for class attribute, you should update the code from

 document.querySelector("container").style.gridTemplateColumns = "3vmax 3vmax 3vmax 3vmax 3vmax";

to

 document.querySelector(".container").style.gridTemplateColumns = "3vmax 3vmax 3vmax 3vmax 3vmax";

or use the container in the next, such as

    const container = document.querySelector(".container")
    let randomNumber = Math.floor(Math.random() * 31) + 40

    if (document.getElementById("grid").value == "first") { //5x5
        container.style.gridTemplateColumns = "3vmax 3vmax 3vmax 3vmax 3vmax";
        container.style.gridTemplateRows = "3vmax 3vmax 3vmax 3vmax 3vmax";
    }

    if (document.getElementById("grid").value == "second") { //6x6
        container.style.gridTemplateColumns = "3vmax 3vmax 3vmax 3vmax 3vmax 3vmax";
        container.style.gridTemplateRows = "3vmax 3vmax 3vmax 3vmax 3vmax 3vmax";
    }

    if (document.getElementById("grid").value == "third") { //10x7
        container.style.gridTemplateColumns = "3vmax 3vmax 3vmax 3vmax 3vmax 3vmax 3vmax 3vmax 3vmax 3vmax";
        container.style.gridTemplateRows = "3vmax 3vmax 3vmax 3vmax 3vmax 3vmax 3vmax";
    }

Upvotes: 0

Related Questions