主页 / user-16361081

DragonsTea25's questions

Martin Hope
DragonsTea25
Asked: 2024-03-07 03:44:13 +0800 CST
  • 9

问题

HTML 中的编辑和删除按钮之间有默认间距。但是，当我使用具有相同结构和类名的 JavaScript 附加新列表项时，这些按钮之间没有间距。

所需行为 使附加按钮与 HTML 标记中的“默认”按钮显示相同。

代码笔

超文本标记语言

            <ul id="list">
                <li class="item">
                    <div>Milk</div>
                    <button class="edit-button">edit</button>
                    <button class="delete-button">X</button>
                </li>
                <li class="item">
                    <div>Cheerios</div>
                    <button class="edit-button">edit</button>
                    <button class="delete-button">X</button>
                </li>
                <li class="item">
                    <div>Cheese</div>
                    <button class="edit-button">edit</button>
                    <button class="delete-button">X</button>
                </li>  
            </ul>

CSS

.title {
    text-align: center;
}

.main {
    border: 1px solid black;
    width: 50%;
    margin: auto;
}

#add-item {
    border: 1px solid black;
}

.input {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.label {
    margin: 10px;
}

#list {
    flex-direction: column;
    display: flex;
}

#list > li{
    list-style-type: none;
    margin: 10px auto;
}

#list div {
    margin-bottom: 10px;
    text-align: center;
}

/* #list button {
    margin: 0px 4px;
} */

JavaScript

// TODO: Grab the list
const shoppingList = document.getElementById("list")
// TODO: Grab the input field
const titleInput = document.getElementById("title")
// TODO: Grab the buttons.
const submitButton = document.getElementById("submit-item")
// const editButtons = document.querySelectorAll(".edit-button")
// const delButtons = document.querySelectorAll(".delete-button")

// TODO: Add click event to the button.
submitButton.addEventListener('click', (e) => {
    e.preventDefault()
    addItem(titleInput.value)
});

// TODO: Create a function to add item.
    // ! Requirement: Must have:
    // !   - item text
    // !   - edit button
    // !   - delete button
    // !   - input field
    // ! Requirement: Add event listeners to buttons

    // TODO: Edit button must get pass the Parent node.

function addItem(title) {
    console.log("Running addItem")
    let newItem = document.createElement("li")
    newItem.classList.add("item")

    let newTitle = document.createElement("div")
    newTitle.textContent = title

    let editBtn = document.createElement("button")
    editBtn.classList.add("edit-button")
    editBtn.innerText = "edit"

    let delBtn = document.createElement("button")
    delBtn.classList.add("delete-button")
    delBtn.innerText = "X"

    editBtn.addEventListener('click', (e) => {
        console.log("Pressed the edit button", e)
        editItem(e.target.parentElement)
    });

    newItem.appendChild(newTitle)
    newItem.appendChild(editBtn)
    newItem.appendChild(delBtn)
    shoppingList.appendChild(newItem)
}


// TODO: Create a function to edit item.
    // ! Requirement: Parent Node (Element) parameter

    // TODO: Remove the Edit, Delete buttons.
    // TODO: Grab text content of the div and assign to variable.
    // TODO: Add an input element to the parent node.
    // TODO: Set input's value to the variable with the text content.
    // TODO: Add the save button.

function editItem(listItem) {
    let title;
    listItem.childNodes.forEach(element => {
        console.log(element.tagName)
        if(element.tagName === "DIV") {
            title = element.innerText
        }
    });

    listItem.innerHTML = ""

    let editInput = document.createElement("input")
    editInput.value = title

    let saveBtn = document.createElement("button")
    saveBtn.classList.add("save-button")
    saveBtn.innerText = "save"

    listItem.append(editInput, saveBtn)

    saveBtn.addEventListener('click', (e) => {
        saveItem(e.target.parentNode)
    });
}

// TODO: Create a function to save item.
    // ! Requirement: Parent Node (Element) parameter
    // TODO: Get the value of the input field and assign to variable
    // TODO: Remove the input and save button.
    // TODO: Create the div, edit, and delete buttons.
    // TODO: Set the div's text content to the variable with the input's value.
    // TODO: Add all those elements to the parent element.

function saveItem(listItem) {
    let titleEdit;

    listItem.childNodes.forEach(element => {
        if(element.tagName === "INPUT") {
            titleEdit = element.value
        }
    });

    listItem.innerHTML = "";

    let changedTitle = document.createElement("div");
    changedTitle.textContent = titleEdit;

    let editBtn = document.createElement("button");
    editBtn.classList.add("edit-button");
    editBtn.innerText = "edit";

    let delBtn = document.createElement("button");
    delBtn.classList.add("delete-button");
    delBtn.innerText = "X";

    listItem.appendChild(changedTitle);
    listItem.appendChild(editBtn);
    listItem.appendChild(delBtn);
}

// TODO: Create a function to delete item.
    // ! Requirement: Parent Node (Element) paramter
    // I believe you can figure this one out yourself. <3 :)

我尝试过的

  • 然而，向按钮添加样式后，附加列表项中按钮之间的间距仍然减小。（我希望如果按钮应用了样式，它可能会解决问题，这对于所有按钮来说都是正确的间距。HTML 元素的间距为 4px，但附加元素的间距似乎为 2px。）
  • 检查了多个浏览器以查看浏览器的渲染是否不同，但是，间距错误在所有浏览器中仍然存在。（我希望在其中一个浏览器中看到正确的版本，以查明这是否是浏览器之间的渲染问题。）
  • 我尝试重置 CSS，结果是 HTML 按钮之间的默认间距，而附加按钮之间没有间距。（我本来希望重置 CSS 来删除按钮之间的所有间距，但它似乎具有 codepen 中所示的默认效果。）
  • 我尝试将代码放入 CodePen 环境中，但仍然遇到同样的问题。（如果我的本地环境出现问题，我希望它能够工作。）
  • 我检查了代码，可能是一个回车空间/回车，但我没有找到任何东西。（我预计隐藏的空间可能是原因，删除它会产生预期的结果。）
  • 我什至咨询过我的教练，他们也不确定。（他们告诉我只需删除默认列表项作为解决方法，但我发帖是因为我真的很好奇为什么会发生这种情况。）

我看过的 StackOverflow 文章 （我尝试链接这些文章，但它说这些链接使我的问题看起来像“垃圾邮件” - 所以，这是标题。）

为什么初始 CSS 样式在 DOM 元素样式字段上不可见？

这是讨论访问样式的 CSS 属性与访问完全渲染的 CSS 属性的问题。这实际上并不适用，因为此示例中默认没有任何样式。

缺少样式的附加元素

样式并没有丢失，而是被应用了，但是相同的样式在附加元素之间应用的方式不同。

删除 HTML CSS 中按钮之间的空格

我重置了 CSS，问题仍然存在。此外，这是水平间距而不是垂直间距。

我可以在列表项中使用 DIV 吗？

检查 HTML 结构是否有效，HTML 规范表明我可以在 li 中包含 div 和其他块级元素。

附加内容没有获得正确的 css 效果

此人遇到了一个问题，即 div 被附加到 UL 元素内部，并导致事情中断。这不是我的问题。

使用缩进间距将元素附加到 DOM

这个特殊的问题是附加的 DIV 的 HTML 结构的格式不正确。我也没有这个问题。我的 HTML 结构在开发工具中看起来完全相同。

在 JavaScript 中附加元素时出现奇怪的错误

此特定问题遇到类型错误。控制台中没有错误。这似乎是一个奇怪的格式/CSS 错误。

这些文章似乎都不适用于这个特定问题。我不确定这是否是一个错误，但是考虑到这主要是默认样式，在浏览器中持续存在，并且即使添加样式也仍然存在。我不知所措。

javascript