The div is incorrect and causing the label and input to move in the wrong direction

Whenever I try to adjust the position of the current-grade-name-input, the entire grade-point-input moves along with it inexplicably.

/*
final grade calculator:

    (wanted-grade - (current-grade * (1 - final%))) / final%

    Ex: 
        have a 80 and wants 85, final is 20%

        (85 - (80 * (1 - 0.2))) / 0.2 = 105

*/



// intro text and buttons
const questionText = document.getElementById("question");
const options = document.getElementById("options");

// gpa variables
const gpaBtn = document.getElementById("gpa-btn");
const gpaCalculator = document.querySelector(".gpa-calculator");
const gpaContainer = document.querySelector(".gpa-container");
const gpaForm = document.getElementById("gpa-form");
const gpaTab = document.querySelector(".gpa-tab");

// add class button
const addGpaClassBtn = document.getElementById("add-class-gpa");
const addCurrentGradeClassBtn = document.getElementById("add-class-current-grade");

// current grade variables
const currentGradeBtn = document.getElementById("current-grade-btn");
const currentGradeCalculator = document.querySelector(".current-grade-calculator");
const pointSystemBtn = document.getElementById("point-system-btn");
const currentGradeNameInput = document.getElementById("current-grade-name-input");
const chooseGradingSystem = document.getElementById("choose-grading-system");
const currentGradeText = document.getElementById("current-grade-text");
const pointSystemInput = document.getElementById("point-system-input");

// exit button variables
const cancelBtn = document.getElementById("cancel-btn");
const confirmClose = document.getElementById("closing-tab-confirm");
const noBtn = document.getElementById("no");



gpaBtn.addEventListener("click", () => {
    questionText.classList.toggle("hidden");
    options.classList.toggle("hidden");
    gpaCalculator.classList.toggle("hidden");
    gpaContainer.classList.toggle("hidden");
    addGpaClassBtn.addEventListener("click", () => {
        gpaForm.classList.toggle("hidden");
        addGpaClassBtn.classList.toggle("hidden");
    });
});

cancelBtn.addEventListener("click", () => {
    confirmClose.showModal();
});

noBtn.addEventListener("click", () => {
    confirmClose.close();
});

currentGradeBtn.addEventListener("click", () => {
    questionText.classList.toggle("hidden");
    options.classList.toggle("hidden");
    currentGradeCalculator.classList.toggle("hidden");
    addCurrentGradeClassBtn.addEventListener("click", () => {
        chooseGradingSystem.classList.toggle("hidden");
        addCurrentGradeClassBtn.classList.toggle("hidden");
        currentGradeText.classList.toggle("hidden");
    });
});

pointSystemBtn.addEventListener("click", () => {
    pointSystemInput.classList.toggle("hidden");
    chooseGradingSystem.classList.toggle("hidden");
    currentGradeText.classList.toggle("hidden");
    currentGradeNameInput.classList.toggle("hidden");
});
/* spaces everything out and center them */

    /* move everything away from the box */
    padding: 15px;

    /* Set the element's position to relative, allowing it to be positioned relative to its normal position in the document flow */
    position: relative;

    /* Enable the flexbox layout model on the element, treating its direct children as flex items */
    display: flex;

    /* Arrange the flex items vertically from top to bottom */
    flex-direction: column;

    /* Add a 10px gap (space) between each flex item within the flex container */
    gap: 20px;
}

/* fix and center everything correctly */
.gpa-tab{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 5px;
    margin-top: -220px;
}


#add-class-btn{
    display: flex;
    justify-content: center;
    margin-top: 200px;
}

/* these two adding in btn and tab are for centering the add button */
.adding-in-tab{
    display: flex;
    justify-content: center;
}

#add-update-btn, #cancel-btn{
    font-size: 15px;
    align-self: center;
    justify-self: center;
    /* move it down a little */
    margin-top: 20px;
}

#add-update-btn{
    width: 35px;
}

#cancel-btn{
    width: 60px;
}

.close-btn{
    display: flex;
    justify-content: center;
}

#closing-tab-confirm {
    padding: 10px;
    margin: 10px auto;
    border-radius: 15px;
    margin-top: 200px;
}

.yes-or-no-btn{
    display: flex;
    justify-content: center;
    margin-top: 10px;
    gap: 10px;
}

.btn{
    width: 50px;
}

.closing-message{
    text-align: center;
}

.hidden{
    display: none;
}

/* put all in the center */
.gpa-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

/* 
make sure they are in the center and right position 
and the number next to the text
*/
.gpa-container>div {
    display: flex;
    gap: 2px;
}

.grade-point-input {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.grade-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.grade-row label {
    width: 30px; /* Adjust as needed */
}

.current-grade-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* content is centered vertically */
    height: 100%;
}

#choose-grading-system {
    text-align: center;
    margin-top: -130px;
}

#choose-grading-system button {
    /* to display the button as block element */
    display: block;
    /* create space between the two buttons */
    /* top margin: 10px, left and right margin to auto, 20px for bottom */
    margin: 10px auto 30px;
}

#current-grade-name-input{
    margin-top: -100px;
}
<main>
    <h1>Calculator</h1>
    <div id="question">
        <p>What Type Of Calculator</p>
    </div>
    <div class="options" id="options">
        <button id="gpa-btn">GPA Calculator</button>
        <button id="current-grade-btn">Current Grade Calculator</button>
        <button id="final-grade-btn">Final Grade Calculator</button>
    </div>
    <div class="gpa-calculator hidden">
        <div class="gpa-container hidden">
            <div>
                <p class="credit-hour-text">Credit Hours:</p>
                <p id="credit-hour-number">0</p>
            </div>
            <div>
                <p class="gpa-text">GPA:</p>
                <p id="gpa-number">0.00</p>
            </div>
            <div>
                <p class="qp-text">Quantity Points:</p>
                <p id="qp-number">0</p>
            </div>
        </div>
        <div id="add-class-btn" class="hidden">
            <button id="add-class-gpa" type="button">Add New Class</button>
        </div>
        <form id="gpa-form" class="hidden">
            <div class="gpa-tab">
                <label for="name-input" class="label-name">Name (Optional)</label>
                <input type="text" class="name-input" id="name-input" value=""/>
                <label for="credit-hour-input" class="label-name">Credit Hour</label>
                <input type="number" class="credit-hour-input" id="credit-hour-input" min="0" required/>
                <label for="gpa-input" class="label-name">GPA</label>
                <input type="number" class="gpa-input" id="gpa-input" min="0" required/>
            </div>
            <div class="adding-in-tab">
                <button id="add-update-btn" type="submit">Add</button>
            </div>
            <div class="close-btn">
                <button id="cancel-btn" type="button">Cancel</button>
            </div>
        </form>
    </div>
    <div class="current-grade-calculator hidden">
        <form id="current-grade-form">
            <div class="current-grade-tab">
                <p id="current-grade-text" class="hidden">Which Grading System</p>
                <div id="add-class-btn" class="hidden">
                    <button id="add-class-current-grade" type="button">Add New Class</button>
                </div>
                <div id="choose-grading-system" class="choose-grading-system hidden">
                    <button id="point-system-btn" type="button">Points System</button>
                    <button id="percentage-system-btn" type="button">Percentage System</button>
                </div>
                <div id="current-grade-name-input" class="hidden">
                    <label for="current-grade-name" class="label-name">Name (Optional)</label>
                    <input type="text" class="name-input" id="name-input" value=""/>
                </div>
                <div id="point-system-input" class="hidden">
                    <div class="grade-point-input hidden">
                        <div class="grade-row">
                            <label for="a-input">A:</label>
                            <input type="number" id="a-min-number" min="0" placeholder="Minimum Points" required/>
                            <input type="number" id="a-max-number" min="1" placeholder="Maximum Points" required>
                        </div>
                        <div class="grade-row">
                            <label for="b-input">B:</label>
                            <input type="number" id="b-min-number" min="0" placeholder="Minimum Points" required/>
                            <input type="number" id="b-max-number" min="1" placeholder="Maximum Points" required>
                        </div>
                        <div class="grade-row">
                            <label for="c-input">C:</label>
                            <input type="number" id="c-min-number" min="0" placeholder="Minimum Points" required/>
                            <input type="number" id="c-max-number" min="1" placeholder="Maximum Points" required>
                        </div>
                        <div class="grade-row">
                            <label for="d-input">D:</label>
                            <input type="number" id="d-min-number" min="0" placeholder="Minimum Points" required/>
                            <input type="number" id="d-max-number" min="1" placeholder="Maximum Points" required>
                        </div>
                        <div class="grade-row">
                            <label for="f-input">F:</label>
                            <input type="number" id="f-min-number" min="0" placeholder="Minimum Points" required/>
                            <input type="number" id="f-max-number" min="1" placeholder="Maximum Points" required>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <dialog id="closing-tab-confirm">
        <form method="dialog">
            <p class="closing-message">Unsaved Changes</p>
            <p class="closing-message">Delete?</p>
            <div class="yes-or-no-btn">
                <button id="yes" type="button" class="btn">Yes</button>
                <button id="no" type="button" class="btn">No</button>
            </div>
        </form>
    </dialog>
</main>

Upon my attempts to reposition the current-grade-name-input individually or alongside the grade-point-input div, both elements seem to move together unexpectedly. However, even after isolating the element, the issue persists. Similarly, my efforts to relocate them separately proved futile.

javascripthtmlcss

Answer №1

The code block below demonstrates how the addEventListener function operates:

pointSystemBtn.addEventListener("click", () => {
    pointSystemInput.classList.toggle("hidden");
    chooseGradingSystem.classList.toggle("hidden");
    currentGradeText.classList.toggle("hidden");
    currentGradeNameInput.classList.toggle("hidden");
});

Within this snippet of code, the elements being toggled are currentGradeNameInput and pointSystemInput, which refer to 

document.getElementById("current-grade-name-input")
and 
document.getElementById("point-system-input")
.

In addition, the grade-point-input is actually a class rather than an id, and it resides within the div labeled as point-system-input. Therefore, when you toggle the div, everything inside it gets toggled as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to divide a list in a Django template?

Currently, I am working on pagination in Django and looking to display the page numbers that come after the current page. The code snippet I am using is as follows: {% for page in blogs_page.paginator.page_range|slice:"0:{{ blogs_page.number }}" %} Howev ...

pythonhtmldjango

the navigation process in $state was not successful

In order to navigate from page A to B, I included the following code in my page A (history.html) view: <a href="#/history/{{data.id}}"> <li class="item"> {{data.items}} </li> </a> In my app.js file, I set the state as ...

javascriptangularjsionic-framework

Issues with Bootstrap Toggle Button functionality

I encountered a navbar error while working on my Django Project. After adding a few script tags, the navbar started to move down but did not return back to its original position. It worked fine before. By commenting out some script tags, it began to work a ...

javascripthtmlcssbootstrap-4

Utilize jQuery append() to create a grid layout using <td> tags

I need to integrate address information from an object into an HTML table using the append() method. The initial HTML table structure is as follows: <table class="shipping_information" border="1"> </table> To achieve this, I place the addre ...

javascriptjqueryhtml

configuration of file types

While using Ipage as my web host, I encountered an issue with an Html document on my server. The problem arose because a json.z file was being read by the browser as "text/html" instead of "application/json; charset=UTF-8", as confirmed in fiddler. Is the ...

jsonhtmlmime-typesmime

Unable to assign a scroll event delegation by using the "on" method

When attempting to delegate a scroll event in order for my element to maintain the same handler after being returned by an ajax call, I utilized the on method for delegation. $('body').on({ scroll:function(){ alert('scrolling&ap ...

javascriptjquerydelegates

Adjust the color of the font within a div element when hovering over it

I've been attempting to modify the text color and add an underline when a user hovers over it. Despite trying various methods, I haven't been successful. I scoured the internet for a solution but couldn't find one that met my specific requi ...

javascripthtmlcss

Store the information in the user interface of React by converting it into a file format

Currently, I am retrieving data from an API and downloading a specific file. My goal is to store this same file in the public directory within my react application. https://i.sstatic.net/bS8Z4.png this.state = { fileDownloadUrl: null, fileName ...

javascriptreactjsreact-nativereact-reduxreact-hooks

Changing a value to display with exactly 2 decimal places using jQuery

Similar Question: JavaScript: how to format a number with exactly two decimals Having successfully added values into a div with a total using some script, I attempt to convert those values into decimal numbers by dividing them by 100 to mimic currency ...

javascriptjquery

What's the most effective method for transferring data to different components?

How can I efficiently pass a user info object to all low-level components, even if they are grandchildren? Would using @input work or is there another method to achieve this? Here is the code for my root component: constructor(private _state: GlobalSta ...

javascriptangulartypescript

Trouble shooting: Angular 2 Http get request not firing

I'm facing an issue where nothing happens when I try to subscribe to my observable. There are no errors in the console or during the build process. Below is the code snippet that I am using: My service getBlueCollars(): Observable<BlueCollar[]& ...

javascriptangularangular2-http

Iterating through a nested array of objects to merge and accumulate values

Just started learning Javascript. I've been trying to wrap my head around it for hours, looking at examples, but still struggling. I'm working with an array of objects that have nested properties which I need to loop through and consolidate. ...

javascriptarraysdictionarynested

"Bootstrap4 - Troubleshooting the Issue of Multiple Carousels Not Function

I attempted to incorporate 2 Bootstrap 4 carousels onto a single page, but encountered issues with the functionality. I utilized this code on my page, however, the last element in the carousel does not cycle correctly. There is a delay of 3 transactions be ...

htmlcsstwitter-bootstrapbootstrap-4

Executing a JavaScript file within the Meteor JS ecosystem

Is there a way to execute a JavaScript file on the server side in a meteor JS environment? Providing some background information: I am looking to automatically insert a document into a mongo database. While I know how to do this in meteor through event-dr ...

javascriptnode.jsmeteorheroku

What is the method for generating three inputs simultaneously in a single line?

I'm facing a challenge in my code where I want each line to contain only three input fields. Whenever I try to add a fourth input field, the first one remains on the previous line while the other three move to the next line. Oddly enough, this issue o ...

javascripthtmlbootstrap-4

Cycle through images that are dynamically generated from retrieved data

Although I have a functional solution for this issue, it feels messy and not the ideal way to handle it in Vue. The challenge is fetching data from a backend related to a "Vendor" entity, which includes photos that need to be displayed on the page. The go ...

javascriptvue.js

Preventing the triggering of events or functions while utilizing angular-gantt

Currently, I am utilizing the Angular directive called angular-gantt to create a gantt chart that displays tasks. Among the various options available, the ones I am focusing on are on-row-clicked, on-task-clicked, and on-task-updated. The issue I am facin ...

javascriptangularjsangularjs-directive

Transforming data in javascript

I am faced with a data transformation challenge involving extracting information from user input in Apache Superset using metrics. The data is assigned to the variable dataTransformation. {country: "Afghanistan", region: "South Asia", y ...

javascriptreactjs

Next JS throwing internal server error when authenticating with axios

I'm encountering a 500 internal server error when trying to authenticate with Next Auth. I followed the documentation from Next Auth for implementation. import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/provi ...

javascriptreactjsaxiosnext.js

Issue with Panel Settings and Tooltip in Amcharts

Looking for solutions to two specific issues that I am struggling with: I have two charts with multiple panels, each having only one scroll bar. My problem lies with the balloon text - when hovering over a balloon, I need to display two different texts ...

javascriptamchartsforexjstockchart