My h1 keeps repositioning while I update it-CodePudding

Okay so I'm making this thing where I use the reddit api and i get a post number then spit out all the info from it. Now I am making a custom number input and here is images of me using it.

How it looks when i load it

How it looks when i update the number

Here's my code:

const numberText = document.querySelector("#numberText")
const modalOpenBtn = document.querySelector("#numberBtn")
const modal = document.querySelector("#modal")
const done = document.querySelector("#done")

modalOpenBtn.addEventListener("click", () => {
    modal.showModal()
})

done.addEventListener("click", () => {
    let number = document.querySelector("#number")
    number.textContent = numberText.value;
    modal.close()
})

// The code below is in another file
const add = document.querySelector('#add');
const subtract = document.querySelector('#subtract');
let number = document.querySelector('#number');

add.addEventListener('click', () => {
    number.innerHTML = `<h1>${parseInt(number.textContent)   1}</h1>`;
})

subtract.addEventListener('click', () => {
    if (parseInt(number.textContent) <= 0) {
        alert('Cannot subtract from 0');
    } else {
        number.innerHTML = `<h1>${parseInt(number.textContent) - 1}</h1>`;
    }
})

body, h1 {
    background: rgb(34, 116, 165);
    color: rgb(250, 250, 255);
    font-family: 'Dosis', sans-serif;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    resize: none;
}

div, button {
    display: flex;
    justify-content: center;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>the most stupidest app ive ever made</title>
    <script defer src="input.js"></script>
    <script defer src="openModal.js"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@200;800&display=swap" rel="stylesheet"> 
</head>
<body>
    <!-- intro -->
    <h1>the most stupidest app ive ever made</h1>
    <p>this app is from a reddit post with random knowledge; enter the number of the reddit post and you'll get it's info:</p><br>

    <!-- buttons -->
    <div>
        <button ><img src="add.svg" width="50" height="50" title="add" id="add"></button>
        <button title="number" id="numberBtn"><h1 id="number">0</h1></button>
        <button ><img src="subtract.svg" width="50" height="50" title="subtract" id="subtract"></button>
    </div>

    <!-- da modal -->
    <dialog id="modal">
        <input type="number" id="numberText"><br>
        <button id="done"><img src="./check.svg"></button>
    </dialog>
</body>
</html>

Ask me any question in the comments regarding the code. Help is appreciated. Thanks!!!

CodePudding user response：

You should have inspected the layout first. You're adding a new h1 to the existing one. Thats what causing the shift. Instead replace the number inside it.

Just replace this line with

number.innerHTML = `<h1>${parseInt(number.textContent)   1}</h1>`

number.innerHTML = `${parseInt(number.textContent)   1}`

CodePudding user response：

You can add position: relative to your navbar.

example for mi code

    .navbar.navbar-inverse {
      position: relative;
    }

<div style="margin-top: 15px;text-align: center;" >