JavaScript Event handlers & functions wont change class

MrRobotBDR · Nov 26, 2023

Hi, im sorry in advance as im very new to JS. I've been trying to do this project all day and no luck.

I have 6 buttons that i need to create functions for. I'm concentrating on button 1 which puts the blue box inside the red box only.

The id dimensions in the css are correct and html is correct (as per project) But i cant seem to get the event handlers to change the ID's to the new classes to get rid of the .hidden class.

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2 Boxes|Event Handling</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="outer">
            <h2>Boxes</h2>
            <form id="myForm">
                <fieldset>
                    <label>Blue box sits inside the red box</label>
                    <button type="button" id="btn1">Click</button>
                </fieldset>

                <fieldset>
                    <label>Blue box sits under the red box</label>
                    <button type="button" id="btn2">Click</button>
                </fieldset>

                <fieldset>
                    <label>Blue box sits to the right of the red box</label>
                    <button type="button" id="btn3">Click</button>
                </fieldset>

                <fieldset>
                    <label>Red box sits to the left of the blue box</label>
                    <button type="button" id="btn4">Click</button>
                </fieldset>

                <fieldset>
                    <label>Blue box sits inside the red box and move the blue box 20px down and 45 pixels to the right of the top left hand corner of the red box</label>
                    <button type="button" id="btn5">Click</button>
                </fieldset>

                <fieldset>
                    <label>Green box around both the blue and red boxes</label>
                    <button type="button" id="btn6">Click</button>
                </fieldset>
            </form>

            <section id="boxes">
                <h2>Boxes</h2>
                <div id="green" class="hidden">
                    <div id="red">
                        <div id="blueIn" class="hidden"></div>
                    </div>
                    <div id="blueBottom" class="hidden"></div>
                </div>
            </section>
        </div>

        <script type="text/javascript" src="js/handling.js"></script>
    </body>
</html>

CSS:

#green {
    background-color: green;
    position: relative;
}

#red {
    width: 600px;
    height: 600px;
    background-color: red;
    position: relative;
}

#blueIn {
    width: 300px;
    height: 300px;
    background-color: blue;
    position: absolute;
    top: 20px;
    left: 45px;
}

.blueBoxIn {
    width: 300px;
    height: 300px;
    background-color: blue;
    position: fixed;
    top: 20px;
    left: 45px;
}

.redBox {
    width: 600px;
    height: 600px;
    background-color: red;
    position: relative;
}

.hidden {
    visibility: hidden;
    display: none;
}

JavaScript:

// function allBoxes() {
//     "use strict";
// }

// function blueBoxInRight() {
//     "use strict";
// }
// function blueBoxLeft() {
//     "use strict";
// }
// function blueBoxRight() {
//     "use strict";
// }
// function blueBoxUnder() {
//     "use strict";
// }

function button1() {
    "use strict";
    document.getElementById("red").className = "redBox";
    document.getElementById("red").classList.remove("hidden"); // Remove 'hidden' class from red element - is this needed??
    document.getElementById("blueIn").className = "blueBoxIn";
    document.getElementById("blueIn").classList.remove("hidden"); // Remove 'hidden' class from blueIn element - - is this needed??
}

function init() {
    "use strict";
    document.getElementById("btn1").addEventListener("click", button1);
    // document.getElementById("btn2").addEventListener("click", blueBoxUnder);
    // document.getElementById("btn3").addEventListener("click", blueBoxRight);
    // document.getElementById("btn4").addEventListener("click", blueBoxLeft);
    // document.getElementById("btn5").addEventListener("click", blueBoxInRight);
    // document.getElementById("btn6").addEventListener("click", allBoxes);
}

window.onload = function () {
    init();
};

Johna · Nov 26, 2023

Hey there.
Using HTMLElement.className = "className"; will replace all existing class names, so you don't have to remove the hidden class.

What exactly is you problem? Clicking the buttons does nothing at all? Are you certain that the path to the JS file is correct? Try starting with simple log messages in the functions to make sure they are called correctly (a test stub).

MrRobotBDR · Nov 27, 2023

Thanks Johna. I've almost worked it out, although it is a mess, it still gets the job done.

I am stuck though, on Button 5, I need the blue box to be inside the red box but on the right hand side (like button 1 but flipped).

I'm also wanting the JS to reset the page on each click of a button as I'm having to do it manually to make the boxes appear for each button click.

Can i add multiple functions? (sorry total newbie)

I've added the most up-to-date code. Hopefully someone can help put my out of my misery 🙂

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2 Boxes|Event Handling</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="outer">
            <h2>Boxes</h2>
            <form id="myForm">
                <fieldset>
                    <label>Blue box sits inside the red box</label>
                    <button type="button" id="btn1">Click</button>
                </fieldset>

                <fieldset>
                    <label>Blue box sits under the red box</label>
                    <button type="button" id="btn2">Click</button>
                </fieldset>

                <fieldset>
                    <label>Blue box sits to the right of the red box</label>
                    <button type="button" id="btn3">Click</button>
                </fieldset>

                <fieldset>
                    <label>Red box sits to the right of the blue box</label>
                    <button type="button" id="btn4">Click</button>
                </fieldset>

                <fieldset>
                    <label>Blue box sits inside the red box and move the blue box 20px down and 45 pixels to the right of the top left hand corner of the red box</label>
                    <button type="button" id="btn5">Click</button>
                </fieldset>

                <fieldset>
                    <label>Green box around both the blue and red boxes</label>
                    <button type="button" id="btn6">Click</button>
                </fieldset>
            </form>

            <section id="boxes">
                <h2>Boxes</h2>
                <div id="green" class="hidden">
                    <div id="red">
                        <div id="blueIn" class="hidden"></div>
                    </div>
                    <div id="blueBottom" class="hidden"></div>
                </div>
            </section>
        </div>

        <script type="text/javascript" src="/js/handling.js"></script>
    </body>
</html>

CSS:

#green {
    display: flex;
    gap: 1em;
    justify-content: flex-start;
    flex-direction: column;
}

#red {
    min-width: 600px;
    max-width: 600px;
    min-height: 600px;
    max-height: 600px;
    background-color: red;
    margin: 1em;
    display: flex;
}

#blueIn {
    min-width: 300px;
    max-width: 300px;
    min-height: 300px;
    max-height: 300px;
    background-color: blue;
    margin: 1em;
    position: relative;
    top: 20px;
    left: 45px;
}

#blueBottom {
    min-width: 300px;
    max-width: 300px;
    min-height: 300px;
    max-height: 300px;
    background-color: blue;
    margin: 1em;
}

#green.greenFlexRow {
    display: flex;
    gap: 1em;
    justify-content: flex-start;
    flex-direction: row;
}
#green.greenFlexReverse {
    display: flex;
    gap: 1em;
    /* justify-content: flex-start; */
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.bg-green {
    background-color: green;
}

/* .redFlipBlue {

} */

.hidden {
    visibility: hidden;
    display: none;
}

JavaScript:

window.onload = function () {
    init();
};

function init() {
    "use strict";
    document.getElementById("btn1").addEventListener("click", button1);
    document.getElementById("btn2").addEventListener("click", button2);
    document.getElementById("btn3").addEventListener("click", button3);
    document.getElementById("btn4").addEventListener("click", button4);
    document.getElementById("btn5").addEventListener("click", button5);
    document.getElementById("btn6").addEventListener("click", button6);
}

function button1() {
    // blue in red
    "use strict";

    document.getElementById("green").className = "greenHidden";
    document.getElementById("red").className = "redBox";
    document.getElementById("blueIn").className = "blueIn";
}

function button2() {
    // blue under red
    "use strict";
    document.getElementById("green").className = "greenHidden";
    document.getElementById("red").className = "redBox";
    document.getElementById("blueBottom").className = "blueBottom";
}

function button3() {
    // blue to right
    "use strict";
    document.getElementById("green").className = "greenFlexRow";
    document.getElementById("red").className = "redBox";
    document.getElementById("blueBottom").className = "blueBottom";
}
function button4() {
    // Red to right
    "use strict";
    document.getElementById("green").className = "greenFlexReverse";
    document.getElementById("red").className = "redBox";
    document.getElementById("blueBottom").className = "blueBottom";
}
function button5() {
    "use strict";
    document.getElementById("green").className = "greenHidden";
    document.getElementById("red").className = "redFlipBlue";
    document.getElementById("blueIn").className = "blueIn";
}

function button6() {
    "use strict";
    document.getElementById("green").className = "bg-green";
    document.getElementById("blueIn").className = "blueIn";
}

Johna · Nov 27, 2023

So according to the label you've written for button 5, you'll probably want to use this CSS for the blue box:

CSS:

.blueIn {
  position: relative;
  top: 20px;
  left: 45px;
}

However, note that this is also going to be applied when you click button 1, because you used the same class name for the blue box. Consider using different class names in each of the functions.

Otherwise you could also directly change the styling of an element using the JS HTMLElement.style property.
Here's an example with adding a 10px top margin to an element with ID element:

JavaScript:

document.getElementById("element").style.marginTop = "10px";

To remove any applied styles, you can use either of the following:

JavaScript:

document.getElementById("element").style = null;

// or

document.getElementById("element").removeAttribute("style");

To reset the styling of the page, you could do something like this (this will only work if you used the above method):

JavaScript:

document.querySelectorAll("*").forEach(element => {
  element.style = null;
});

Welcome to Code Forum!

JavaScript Event handlers & functions wont change class

MrRobotBDR

New Coder

Attachments

Johna

Frontend Developer

MrRobotBDR

New Coder

Johna

Frontend Developer

New Threads

Latest posts

Share this page

Buy us a coffee!

About Us

Site links

We value your privacy

Welcome to Code Forum!

JavaScript Event handlers & functions wont change class

MrRobotBDR

New Coder

Attachments

Johna

Frontend Developer

MrRobotBDR

New Coder

Johna

Frontend Developer

Log in

New Threads

Latest posts

Share this page

Buy us a coffee!

About Us

Site links

Stay Connected

We value your privacy