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

Adjust the number of columns displayed when rendering with Datatables

I've utilized DataTables to create a dynamic datatable. $('table').DataTable( { dom: 'Bfrtip', buttons: [ 'copy', 'excel', 'print', ], responsive: true } The table I created c ...

jqueryhtmldatatabledatatables

Minimizing the gap between icon and label text

I have a React form that I need help with. The issue is that I want to reduce the space between the list icon and the label. Here is the CSS I am using: .form__container { display: flex; flex-wrap: wrap; } .form__container input { color: rgb(115, 0, ...

javascripthtmlcssreactjstwitter-bootstrap

retrieve the index from the chosen elements

Hey there! I'm facing a situation where I have a div with several child elements. Using jQuery, I want to find the index of a specific element within a certain selector. <div> <div class="red"></div> <div class="red"></ ...

javascriptjqueryhtmlindexing

Is it a wise decision to provide the client with a new token just one minute before the expiration of the old one?

When monitoring my backend, I constantly check the remaining time before the JWT expires, which is set to 15 minutes. If there is only one minute left or less, I generate a new JWT and include it in the response header as a setToken. The front-end can then ...

javascriptnode.jsexpressjwt

The latest update to the Server Stats code mistakenly changes the channel to "undefined" instead of displaying the total number

I've been working on a private bot for a specific server that displays server statistics and more. However, I've encountered an issue where every time a user joins or leaves the guild, the bot updates a channel with 'undefined' instead ...

javascriptnode.jsdiscorddiscord.js

Issues have been identified with the capabilities of Vue's Mutations and Actions

My Index.js from the Store Folder import Vue from "vue"; import Vuex from "vuex"; import state from "../store/state"; import mutations from "../store/mutations"; import actions from "../store/actions"; Vu ...

javascriptvue.jsvuejs2vuex

Ways to rearrange an object with javascript

I am looking to restructure my object by removing a nesting. How can I achieve this using JavaScript? Actual: var a = [ { clickedEvents: { 'event-element': 'a', 'event-description': & ...

javascriptjson

Changes in query parameters on NextJS navigation within the same page do not activate hooks

When utilizing NextJS without SSR, I encountered an issue with basic navigation using different query parameters. Upon the initial arrival on the page/component, everything seems fine as the component gets mounted and URL params change accordingly. However ...

javascriptreactjsnext.js

Closing the nested accordion will collapse all sections within the accordion

I'm currently facing an issue with my nested accordions. I've been attempting to nest them in a way that doesn't require writing additional jQuery code for each new one added. As an example, I've created a jsfiddle... https://jsfiddle. ...

javascriptjquery

I'm having trouble understanding why my Javascript validation suddenly stopped functioning. Can anyone assist me in troubleshooting this issue?

I have been working on this webpage for a school project for a few days, and it was running smoothly until about 10 minutes ago. The only change I made was adding an extra JavaScript validation. Now, when I try to register by clicking the "register" butt ...

javascriptphphtml

Numerous Kendo windows are layered on top of each other, yet the text divisions within them remain distinct

I am currently working on a project that involves laying out multiple Kendo windows in rows. Specifically, I need to display 4 windows in each row and have them shift left when closed. My framework of choice is Bootstrap 3. Everything works as expected w ...

javascriptjqueryhtmlkendo-uitwitter-bootstrap-3

Is there a way to assign innerHTML values to table cells using PHP?

I'm currently building a website that relies on a database to store information. I have created an array to hold the values retrieved from the database, and now I need to populate a table with these values. Each cell in the table has a numerical ID ra ...

javascriptphphtml

I am facing issues with getting the delete function to properly function in my React

Issue with Delete Button Functionality in React While I am able to successfully delete an item using axios call in Postman, implementing the same functionality on the front-end in a React component seems to be causing problems for me. <button onSubmit ...

javascriptnode.jsreactjsecmascript-6

JavaScript: Closing a Tab

Using AngularJS for my project and I have a link that opens a tab. If the user right clicks on the link and selects open link in new tab, then on the page abc.html I have code like $window.close(); which is not working as expected. I am receiving the error ...

javascriptjqueryangularjs

Babel is failing to transpile the Modal component from material-ui-next to ES5

Issue with Babel transpiling Modal component from material-ui-next Here is my .babelrc configuration: { "presets": ["es2015", "react", "stage-1", "stage-2", "stage-3"] } This is the webpack-config.js setup: var webpack = require('webpack'); ...

javascriptreactjsbabeljsmaterial-ui

Displaying a Next.js component depending on the environment setting

Having trouble displaying a maintenance message to users based on an environment value. In my .env.local file, I have the following value set: NEXT_PUBLIC_SHOW_MAINTENANCE=true This is how my page is structured: const Index = () => { const showMai ...

javascriptreactjsnext.js

Troubleshooting problem with jQuery UI accordion and sortable feature

I've run into an issue with the sortable functionality of accordion. I am attempting to drag and reorder the <h3> elements, but for some reason, the sorting is not functioning as expected. I followed the instructions from the official demo (here ...

jqueryhtmljquery-uiaccordionjquery-ui-sortable

Issue with confirming deletion of tabulated records

HTML Code: <td>random_data_1</td><td><button id="random_data_1"></button></td> <td>random_data_2</td><td><button id="random_data_2"></button></td> <td>random_data_3</td ...

phpjqueryhtmlajax

In JavaScript, the task involves filtering through multiple arrays of objects to calculate the average value based on the contract number

Every object in the Array contains a contractNumber, but with repeated values. I am attempting to determine the average value of each unique contractNumber. var vendorArr=[{ "contractNumber":5258, "monthId":0, "value":2}, { ...

javascriptjquery

The issue with importing data into Google Sheets due to an error with Ljava

After combining different scripts, I am struggling to properly input data into the code. Email Input: *Status:* *Date:* 03/31/2020 *WorkOrder:* 123456-1 *DMSShipDate:* 03/31/2020 *PONumber:* 8675309 *Company:* Test New Script var ui = SpreadsheetApp.g ...

javascriptgoogle-apps-scriptgoogle-sheets