Блог

Главная - Вопросы по программированию - Функция кнопки мешает функции ввода

Функция кнопки мешает функции ввода

#javascript #html #dom #button #events

#javascript #HTML #dom #кнопка #Мероприятия

Вопрос:

Я создаю список, в который я могу добавлять и удалять элементы. Мне удалось добавить новые элементы, но когда я добавляю функцию к кнопке удаления, это приводит к сбою формы отправки. После того, как я добавил btn.addEventListener("click", runEvent) form.addEventListener("submit", addItem); Перестал работать

HTML:

 <div class="container">
    <div id="main" class="card card-body">
        <h2 class="title">Add Items</h2>
        <form id="addForm" class="form-inline mb-3">
            <input type="text" class="form-control mr-2" id="item">
            <input type="submit" class="btn btn-dark" value="Submit">
        </form>
        <h2 class="title">Items</h2>
        <ul id="items" class="list-group">
            <li class="list-group-item">Item 1 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
            <li class="list-group-item">Item 2 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
            <li class="list-group-item">Item 3 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
            <li class="list-group-item">Item 4 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
        </ul>
    </div>
</div>

JS:

 let form = document.getElementById("addForm")
let itemList = document.getElementById("items")

let btn = document.getElementsByClassName("btn btn-danger btn-sm float-right delete")

btn.addEventListener("click", runEvent)

function runEvent(event){

    event.preventDefault()
    console.log("hi")
}

// Form submit event
form.addEventListener("submit", addItem);

// Add item
function addItem(e){

    e.preventDefault()
    console.log(e)

    // Get input value

    let newItem = document.getElementById("item").value

    // Create new li
    let newLI = document.createElement("li")
    // Add class

    newLI.className = "list-group-item"
    // Add text node with input

    newLI.textContent = newItem

    //Delete button

    let button = document.createElement("button")
    button.className = "btn btn-danger btn-sm float-right delete"
    button.textContent = "X"
    newLI.appendChild(button)

    itemList.appendChild(newLI)
    document.getElementById("item").value = ""
}

Ответ №1:

сначала вам нужно закрыть каждую строку в вашем JS, ; затем, пока вы выбираете более одного элемента, вам нужно определить, какую кнопку вам нужно использовать с вашим JS, пока вы устанавливаете один и тот же оператор для всех кнопок, поэтому я querySelectorAll() выбирал все кнопки и использовал цикл for toсо всеми результатами попробуйте фрагмент. желаю вам удачи в достижении ваших целей.

 let form = document.getElementById("addForm");
let itemList = document.getElementById("items");

let btn = document.querySelectorAll(".delete");
for (var i =0; i<btn.length ; i  ) {

btn[i].addEventListener("click", function runEvent(event){

    event.preventDefault();
    console.log("hi");
});
}







// Form submit event
form.addEventListener("submit", addItem);

// Add item
function addItem(e){

    e.preventDefault();
    console.log(e);

    // Get input value

    let newItem = document.getElementById("item").value;

    // Create new li
    let newLI = document.createElement("li");
    // Add class

    newLI.className = "list-group-item";
    // Add text node with input

    newLI.textContent = newItem;

    //Delete button

    let button = document.createElement("button");
    button.className = "btn btn-danger btn-sm float-right delete";
    button.textContent = "X";
    newLI.appendChild(button);

    itemList.appendChild(newLI);
    document.getElementById("item").value = "";
} 
 <div class="container">
   <div id="main" class="card card-body">
    <h2 class="title">Add Items</h2>
    <form id="addForm" class="form-inline mb-3">
      <input type="text" class="form-control mr-2" id="item">
      <input type="submit" class="btn btn-dark" value="Submit">
    </form>
    <h2 class="title">Items</h2>
    <ul id="items" class="list-group">
      <li class="list-group-item">Item 1 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
      <li class="list-group-item">Item 2 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
      <li class="list-group-item">Item 3 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
      <li class="list-group-item">Item 4 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
    </ul>
   </div>

Ответ №2:

ответ перед моим хорош и все, но он не может запускать функцию при нажатии кнопки удаления нового добавленного элемента, это произошло потому, что к кнопке добавленного элемента не было добавлено EventListener или onclick. итак, я сделал эту работу.

Я также сделал так, чтобы элемент удалялся при нажатии кнопки удаления.

вы можете запустить фрагмент и проверить

 let form = document.getElementById("addForm");
let itemList = document.getElementById("items");

function runEvent(event) {

  event.preventDefault();
  itemList.removeChild(event.target.parentNode)
};

let btn = document.querySelectorAll(".delete");
for (var i = 0; i < btn.length; i  ) {

  btn[i].addEventListener("click", () => runEvent(event));
}







// Form submit event
form.addEventListener("submit", addItem);

// Add item
function addItem(e) {

  e.preventDefault();
  // Get input value

  let newItem = document.getElementById("item").value;

  // Create new li
  let newLI = document.createElement("li");
  // Add class

  newLI.className = "list-group-item";
  // Add text node with input

  newLI.textContent = newItem;

  //Delete button

  let button = document.createElement("button");
  button.className = "btn btn-danger btn-sm float-right delete";
  button.textContent = "X";
  button.addEventListener('click', () => runEvent(event))
  newLI.appendChild(button);

  itemList.appendChild(newLI);
  document.getElementById("item").value = "";
} 
 <div class="container">
  <div id="main" class="card card-body">
    <h2 class="title">Add Items</h2>
    <form id="addForm" class="form-inline mb-3">
      <input type="text" class="form-control mr-2" id="item">
      <input type="submit" class="btn btn-dark" value="Submit">
    </form>
    <h2 class="title">Items</h2>
    <ul id="items" class="list-group">
      <li class="list-group-item">Item 1 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
      <li class="list-group-item">Item 2 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
      <li class="list-group-item">Item 3 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
      <li class="list-group-item">Item 4 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
    </ul>
  </div>

надеюсь, это помогло