Javascript - 如何定位按鈕旁邊生成的輸入？

Question

我正在處理待辦事項列表。 我現在苦苦掙扎的 function 是“完成”function。當你按下完成時，我希望它使創建的輸入的背景顏色為綠色，並在文本中加上一行。

我遇到的問題是，如何定位生成的輸入？ 我試着用 e.target 來做，但無法弄清楚 rest。我得到的壁櫥是 e.target.ParentElement 但這使一切都變成綠色而不是輸入背景，更不用說文本中的一行了。

謝謝你。

<body>
    <section class="main-container width-restriction">
    <header>Alex's To Do List</header>

    <form>
        <input type="text" class="todo-input">
        <button class="todo-button" type="submit">Add ToDo</button>
    </form>

    <h3>Tasks</h3>
    
    <div class="todo-container">
        <ul class="todo-list"></ul>
    </div>

</section>

    



    
    <script src="index.js"></script>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    font: inherit;
    }
    
    body, html {
    min-width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    font-size: 100%;
    background-color: #312C56;
    font-family: 'Montserrat';
    }
    
    img, picture, svg, video {
        max-width: 100%;
        display: block;
    }

    .width-restriction {
        max-width: 1200px;
        margin: 0 auto;
      }

    

    .main-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        background-color: hsla(0, 6%, 93%, 0.803);
        width: 100%;
        
        border-radius: 15px;
      }

      header {
        padding: .8em;
        font-size: 3rem;
        text-align: center;
        font-weight: 700;

      }

      .todo-input {
        width: 70%;
        background-color: #ffffff;
        color: black;
        padding: .5em 1em;
        font-size: 1.5rem;
        border-radius: 15px;
        border-style: none;
      }

      textarea:focus, input:focus {
        outline-color: #e348c4;
    }

      form {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 10px;
      }

      h3 {
        padding: 1em;
        font-size: 2rem;
        font-weight: 700;
        

      }

      .todo-button {
            width: 10%;
            border-radius: 15px;
            border: none;
            background-color: #e348c4;
            color: white;
            text-transform: uppercase;
            font-size: 1rem;
    
      }

      .todo-button:hover {
        width: 10%;
        border-radius: 15px;
        border: none;
        background-color: #b600f8;
        color: white;
        text-transform: uppercase;
        font-size: 1rem;
      }
      
.todo-list {
    width: 100%;
}


.todo-container {
    display: flex;
    width: 100%;
}

.todo {
    display: flex;
    padding: 1rem;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    
    width: 100%;
    box-sizing: border-box;
}

.edit-btn, .delete-btn {
    
    width: 12%;
    height: 2rem;
    border-radius: 15px;
    border: none;
    background-color: #e348c4;
    color: white;
    text-transform: uppercase;
    font-size: 1rem;
    

}

.generated-input {
    width: 100%;
    background-color: #ffffff;
    color: black;
    padding: .5em 1em;
    font-size: 1.5rem;
    border-radius: 15px;
    border-style: none;

    
}

li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76%;
    gap: 1rem;
    padding-left: 7em;
    
}

.completed  {
    text-decoration: line-through;
}

JS

// Selectors
const addButton = document.querySelector('.todo-button');
const toDoInput = document.querySelector('.todo-input');
const toDoUi =  document.querySelector('.todo-list');


// Event Listeners
addButton.addEventListener('click', addToDoItem);
toDoUi.addEventListener('click', deleteItem);
toDoUi.addEventListener('click', completeItem);


// Functions
function addToDoItem(event) {
    // Our button is inside a form which defaults to submitting and resetting the forum, we need to stop that:
    event.preventDefault()
    // Create DIV
    const div = document.createElement('div');
    div.classList.add('todo');
    // Create LI
    const li = document.createElement('li')
    li.innerHTML = `<input type="text" class="generated-input" value="${toDoInput.value}" disabled="disabled">`
    li.classList.add('todo-item')
    div.append(li)
    // Edit button
    const editButton = document.createElement('button')
    editButton.classList.add('edit-btn')
    editButton.innerText = 'Complete'
    div.append(editButton)
    // Delete button
    const deleteButton = document.createElement('button')
    deleteButton.classList.add('delete-btn')
    deleteButton.innerText = `Delete`
    div.append(deleteButton)

    toDoUi.append(div);

    toDoInput.value = '';
   
}

// Delete Function

function deleteItem(e) {
if (e.target.classList[0] === 'delete-btn') {
    const todo = e.target.parentElement;
    todo.remove()

}
}

function completeItem(e) {
    if (e.target.classList[0] === 'edit-btn') {
        e.target.style.backgroundColor = 'green';
        
    }
}

Answer 1

感謝 Yousaf，這對我有用

e.target.closest(".todo").querySelector(".generated-input").style.backgroundColor = 'green'

Javascript - 如何定位按鈕旁邊生成的輸入？

問題描述

1 個解決方案

解決方案1
0 2023-01-26 10:24:48

Javascript - 如何定位按鈕旁邊生成的輸入？

問題描述

1 個解決方案

解決方案1 0 2023-01-26 10:24:48

解決方案1
0 2023-01-26 10:24:48