预算App点击编辑按钮后输入框格式错乱问题求助

问题根源 #

1. 预算项的元素（名称、费用、编辑/删除按钮）未分组，Grid布局中元素自动填充导致排版混乱。
2. 编辑时输入框的类名添加错误，导致列位置反向。
3. 编辑后元素添加顺序与原项不一致，破坏了Grid列的对应关系。

修复方案 #

1. 给每个预算项添加行容器

将每个预算项的所有元素包裹在.budget-row容器中，确保每行作为独立布局单元，避免元素错位。

2. 修正类名与元素顺序

编辑时给输入框添加正确的类名，保持元素添加顺序与原项一致（名称输入框→费用输入框→编辑按钮→删除按钮）。

3. 定位原项位置替换内容

编辑时直接清空当前项的行容器并替换内容，确保编辑后的项保留在原位置。

修改后的完整代码 #

HTML

<div id="container">
    <h1>Budget App</h1>
    <div id="inputContaier">
        <label for="itemInput" class="label">
            Item:<input type="text" id="item">
        </label>
        <label for="costInput" class="label">
            Cost:<input type="number" id="cost">
        </label>
    </div>
    <button id="submit">Submit</button>

    <!--Items go in this div-->
    <div id="budget">
        <div class="budget-row">
            <div class="itemCont">Item</div>
            <div class="costCont">Cost</div>
            <div class="edit">Edit</div>
            <div class="delete">Delete</div>
        </div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

#container {
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 100vh;
}

.label {
    display: flex;
    flex-direction: row;
    margin: 2rem 3rem; 
}

#inputContaier {
    display: flex;
    flex-direction: row; 
}

#submit{
    width: 5rem;
    height: 2rem;
    border-radius: 23px;
    margin-bottom: 1rem;
}

#budget{
    border: solid 2px black;
    width: 50rem;
    max-height: 30em;
}

.budget-row {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
}

.itemCont {
    grid-column-start: 1;
    grid-column-end: 4;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.costCont {
    grid-column-start: 5;
    grid-column-end: 8;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit{
    grid-column-start: 9;
    grid-column-end: 12;
    width: 3rem;
    height: 1rem;
    border-radius: 23px;
    justify-self: center;
}

.delete{
    grid-column-start: 13;
    grid-column-end: 16;
    width: 3rem;
    height: 1rem;
    border-radius: 23px; 
    justify-self: center;
}

JavaScript

const submit = document.getElementById("submit")
const budget = document.getElementById("budget")

submit.addEventListener("click", () => {
    const item = document.getElementById("item").value
    const cost = document.getElementById("cost").value

    const budgetRow = document.createElement("div")
    budgetRow.classList.add("budget-row")

    const newItem = document.createElement("div")
    const newCost = document.createElement("div")
    const editBtn = document.createElement("button")
    const delBtn = document.createElement("button")
    const editItemInput = document.createElement("input")
    const editCostInput = document.createElement("input")

    newItem.classList.add("itemCont")
    newCost.classList.add("costCont")
    editBtn.classList.add("edit")
    delBtn.classList.add("delete")

    newItem.innerText = item
    newCost.innerText = cost
    editBtn.innerText = "Edit"
    delBtn.innerText = "Delete"

    editItemInput.value = item
    editCostInput.value = cost

    budgetRow.appendChild(newItem)
    budgetRow.appendChild(newCost)
    budgetRow.appendChild(editBtn)
    budgetRow.appendChild(delBtn)
    budget.appendChild(budgetRow)

    editBtn.addEventListener("click", () => {
        budgetRow.innerHTML = ""
        editItemInput.classList.add("itemCont")
        editCostInput.classList.add("costCont")
        budgetRow.appendChild(editItemInput)
        budgetRow.appendChild(editCostInput)
        budgetRow.appendChild(editBtn)
        budgetRow.appendChild(delBtn)
    })

    delBtn.addEventListener("click", () => {
        budgetRow.remove()
    })
})

内容的提问来源于stack exchange，提问作者Kevin Casey