0

Есть следующий html код:

<h1>My favourite desserts</h1>
<ul id="desserts">
</ul>
<button id="addButton">Add a dessert</button>

И javascript код:

function buttonFunc() {
    const newDesert = prompt("Enter a new dessert: ");
    const newLi = document.createElement("li");
    newLi.id = newDesert.toLowerCase();
    newLi.textContent = newDesert;

    newLi.addEventListener("click", editDessert(newLi.id)); // Активируется при первом вводе десерта
    document.getElementById("desserts").appendChild(newLi); 
}

function editDessert(id) {
    const newDessertName = prompt("Enter a NEW dessert name: ");
    const editedDessert = document.getElementById(id);
    editedDessert.textContent = newDessertName;
    editedDessert.id = newDessertName.toLowerCase();
}

document.getElementById("addButton").addEventListener("click", buttonFunc);

Задумано, что можно нажать на кнопку Add a desert, вписать десерт и он отобразится как элемент списка(<li id="tiramisoo">Tiramisoo</li>).

Потом можно будет нажать на элемент списка, например, Tiramisoo и должна быть вызвана функция editDessert(), хотя она вызывается сразу после первого ввода десерта.

february
  • 55

1 Answers1

1

Проблема в этом: newLi.addEventListener("click", editDessert(newLi.id)); / Посмотрите на мой вариант исправления:

function buttonFunc() {
  const newDesert = prompt("Enter a new dessert: ");
  const newLi = document.createElement("li");
  newLi.id = newDesert.toLowerCase();
  newLi.textContent = newDesert;
  newLi.setAttribute("onclick","editDessert(this.id);");

document.getElementById("desserts").appendChild(newLi);
}


function editDessert(id) {
  const newDessertName = prompt("Enter a NEW dessert name: ");
  const editedDessert = document.getElementById(id);
  editedDessert.textContent = newDessertName;
  editedDessert.id = newDessertName.toLowerCase();
}


document.getElementById("addButton").addEventListener("click", buttonFunc);
<h1>My favourite desserts</h1>
<ul id="desserts">
</ul>
<button id="addButton">Add a dessert</button>
Nilsan
  • 1,115