js 用户将名称添加到屏幕上的列表 - Javascript (1)

📌 相关文章

📜 js 用户将名称添加到屏幕上的列表 - Javascript (1)

📅 最后修改于: 2023-12-03 14:43:32.757000 🧑 作者: Mango

JS 用户将名称添加到屏幕上的列表 - JavaScript

在这个简单的 JavaScript 项目中，我们将创建一个可以让用户将他们的名称添加到屏幕上的列表。

HTML

为了创建我们的列表，我们需要先在HTML中创建一个空的 <ul> 元素：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>User List</title>
  </head>
  <body>
    <h1>User List</h1>
    <input type="text" id="input-name" placeholder="Enter your name">
    <button id="add-btn">Add</button>
    <ul id="list"></ul>
    <script src="main.js"></script>
  </body>
</html>

在这里，我们创建了一个标题和一个文本框和添加按钮。还有一个空的 <ul> 元素，该元素将用于将用户添加到列表中。

我们还将为我们的 JavaScript 代码创建一个单独的 main.js 文件。

JavaScript

我们具体的JavaScript代码如下：

// 选择所有需要用到的 HTML 元素
const nameInput = document.querySelector('#input-name');
const addBtn = document.querySelector('#add-btn');
const userList = document.querySelector('#list');

// 创建一个空的数组来保存用户添加的名称
let users = [];

// 当用户点击 'Add' 按钮时，执行添加用户逻辑
addBtn.addEventListener('click', function() {
  // 获取输入框中的文本
  const name = nameInput.value.trim();

  // 如果用户输入不为空
  if (name !== '') {
    // 添加新用户到数组中
    users.push(name);

    // 清空输入框中的文本
    nameInput.value = '';

    // 创建一个新的列表项并将其添加到列表中
    const li = document.createElement('li');
    li.textContent = name;
    userList.appendChild(li);
  }
});

在代码中，我们选择了所有需要用到的 HTML 元素。然后我们定义一个空的数组 users，它将保存用户输入的名称。

当用户单击“添加”按钮时，程序将首先获取输入框中的文本。如果用户输入不为空，则将新名称添加到 users 数组中。然后清空输入框中的文本，以便课后输入。最后，我们创建一个新的列表项 <li> 并将其添加到 <ul> 中以显示用户输入的名称。

结论

此时，您应该已经了解了如何创建一个简单的用户列表应用程序，该应用程序使用 JavaScript 将用户名称添加到屏幕上。

整个代码块为：

# JS 用户将名称添加到屏幕上的列表 - JavaScript

在这个简单的 JavaScript 项目中，我们将创建一个可以让用户将他们的名称添加到屏幕上的列表。

## HTML

为了创建我们的列表，我们需要先在HTML中创建一个空的 `<ul>` 元素：

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>User List</title>
  </head>
  <body>
    <h1>User List</h1>
    <input type="text" id="input-name" placeholder="Enter your name">
    <button id="add-btn">Add</button>
    <ul id="list"></ul>
    <script src="main.js"></script>
  </body>
</html>