Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Event handlers & functions wont change class

MrRobotBDR

New Coder
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();
};
 

Attachments

  • 02-Mockup-Boxes-Blue under Red box.PNG
    02-Mockup-Boxes-Blue under Red box.PNG
    21 KB · Views: 4
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).
 
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";
}
 
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;
});
 

New Threads

Buy us a coffee!

Back
Top Bottom