编码挑战：JavaScript 利用按钮添加一个列表

最新推荐文章于 2022-05-26 16:26:52 发布

kllo__

最新推荐文章于 2022-05-26 16:26:52 发布

阅读量524

点赞数

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/kllo__/article/details/122944626

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

问题描述

在已有的 HTML 代码中定义了一个空的甜品列表。

编写JavaScript 代码，在用户单击按钮时将新甜品添加到列表中，甜品的名称由用户输入。

如果能实现单击甜点可以更改甜点的名称，这将是加分项。

<html>
 <head>
 </head>
 <body>
	<h1>My favourite desserts</h1>

	<ul id="desserts">
	</ul>

   <p><button id="addButton">Add a dessert</button></p>
  </body>
</html>

解决方法

我的，没实现单击列表改变名称

//Write-Your-Code-Here
const ulElement=document.getElementById("desserts");
document.getElementById("addButton").addEventListener("click",e=>{
    const liElement=document.createElement("li");
    let dessertName=" ";
    dessertName=prompt("input a dessert:");
    liElement.textContent=dessertName;
    ulElement.appendChild(liElement);
});
// 单击列表时可以改变名称

参考答案：

document.querySelector("#addButton").addEventListener("click", () => {
  const dessertName = prompt("Enter the dessert name:");
  const dessertElement = document.createElement("li");
  dessertElement.textContent = dessertName;
  dessertElement.addEventListener("click", e => {
    const newName = prompt(
      `Update the name of dessert ${e.target.textContent}:`
    );
    e.target.textContent = newName;
  });

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