主题：使用 'on.click' 保存到数组

简介

在编写JavaScript代码时，经常需要从用户输入中获取并存储数据。当用户点击事件发生时，使用'on.click'事件来捕捉这些输入是很常见的。本主题将介绍如何使用'on.click'事件以及一些常见的JavaScript方法来保存用户输入到JavaScript数组中。

JavaScript基础知识

在深入介绍如何使用'on.click'事件的细节之前，我们需要先了解一些JavaScript的基础知识。以下是一些我们将在本主题中使用的JavaScript方法：

document.getElementById()

这个方法用于获取指定id的HTML元素。我们将使用它来获取用于输入的HTML输入元素。

document.createElement()

该方法用于创建HTML元素。我们将使用它来动态创建新的HTML元素并将其添加到DOM树中。

Array.push()

该方法用于将一个元素添加到数组的最后面。我们将使用它来将用户输入添加到数组中。

JSON.stringify()

该方法用于将JavaScript对象转换为JSON字符串。我们将使用它来将JavaScript数组转换为JSON格式，以便我们可以将其存储在本地存储或通过网络发送给服务器。

使用 'on.click' 保存到数组

接下来，让我们看一下如何使用'on.click'事件来捕捉用户输入并将其保存到数组中。以下是我们将使用的HTML代码：

<input type="text" id="input">
<button id="save-button">Save</button>

以上HTML代码将创建一个文本输入框和一个保存按钮。接下来，我们将编写一些JavaScript代码以便在用户点击保存按钮时将输入添加到数组中。以下是我们将使用的JavaScript代码：

// 获取输入元素和保存按钮
 const input = document.getElementById('input');
 const saveButton = document.getElementById('save-button');

 // 创建一个新数组
 let savedInputs = [];

 // 给“保存”按钮绑定点击事件
 saveButton.onclick = function() {
   // 将用户输入添加到数组中
   savedInputs.push(input.value);

   // 创建一个新的段落元素来显示保存的输入
   const newParagraph = document.createElement('p');
   newParagraph.textContent = 'Saved input: ' + input.value;

   // 将新段落元素添加到DOM树中
   const savedInputsContainer = document.getElementById('saved-inputs');
   savedInputsContainer.appendChild(newParagraph);

   // 将保存的输入转换为JSON格式并将其存储到localStorage中
   const savedInputsJson = JSON.stringify(savedInputs);
   localStorage.setItem('savedInputs', savedInputsJson);

   // 清空输入框
   input.value = '';
 };

以上JavaScript代码将执行以下操作：

1. 获取输入元素和保存按钮。

2. 创建一个新的空数组。

3. 给“保存”按钮绑定点击事件。

4. 在点击“保存”按钮时，将用户输入添加到数组中。

5. 创建一个新的段落元素来显示保存的输入，并将其添加到DOM树中。

6. 将保存的输入转换为JSON格式并将其存储到localStorage中。

7. 清空输入框。

返回的Markdown格式

以下是完整的Markdown格式的代码片段：

# 主题：使用 'on.click' 保存到数组

## 简介

在编写JavaScript代码时，经常需要从用户输入中获取并存储数据。当用户点击事件发生时，使用'on.click'事件来捕捉这些输入是很常见的。本主题将介绍如何使用'on.click'事件以及一些常见的JavaScript方法来保存用户输入到JavaScript数组中。

## JavaScript基础知识

在深入介绍如何使用'on.click'事件的细节之前，我们需要先了解一些JavaScript的基础知识。以下是一些我们将在本主题中使用的JavaScript方法：

### document.getElementById()

这个方法用于获取指定id的HTML元素。我们将使用它来获取用于输入的HTML输入元素。

### document.createElement()

该方法用于创建HTML元素。我们将使用它来动态创建新的HTML元素并将其添加到DOM树中。

### Array.push()

该方法用于将一个元素添加到数组的最后面。我们将使用它来将用户输入添加到数组中。

### JSON.stringify()

该方法用于将JavaScript对象转换为JSON字符串。我们将使用它来将JavaScript数组转换为JSON格式，以便我们可以将其存储在本地存储或通过网络发送给服务器。

## 使用 'on.click' 保存到数组

接下来，让我们看一下如何使用'on.click'事件来捕捉用户输入并将其保存到数组中。以下是我们将使用的HTML代码：

```html
<input type="text" id="input">
<button id="save-button">Save</button>

以上HTML代码将创建一个文本输入框和一个保存按钮。接下来，我们将编写一些JavaScript代码以便在用户点击保存按钮时将输入添加到数组中。以下是我们将使用的JavaScript代码：

// 获取输入元素和保存按钮
 const input = document.getElementById('input');
 const saveButton = document.getElementById('save-button');

 // 创建一个新数组
 let savedInputs = [];

 // 给“保存”按钮绑定点击事件
 saveButton.onclick = function() {
   // 将用户输入添加到数组中
   savedInputs.push(input.value);

   // 创建一个新的段落元素来显示保存的输入
   const newParagraph = document.createElement('p');
   newParagraph.textContent = 'Saved input: ' + input.value;

   // 将新段落元素添加到DOM树中
   const savedInputsContainer = document.getElementById('saved-inputs');
   savedInputsContainer.appendChild(newParagraph);

   // 将保存的输入转换为JSON格式并将其存储到localStorage中
   const savedInputsJson = JSON.stringify(savedInputs);
   localStorage.setItem('savedInputs', savedInputsJson);

   // 清空输入框
   input.value = '';
 };

以上JavaScript代码将执行以下操作：

1. 获取输入元素和保存按钮。

2. 创建一个新的空数组。

3. 给“保存”按钮绑定点击事件。

4. 在点击“保存”按钮时，将用户输入添加到数组中。

5. 创建一个新的段落元素来显示保存的输入，并将其添加到DOM树中。

6. 将保存的输入转换为JSON格式并将其存储到localStorage中。

7. 清空输入框。

希望本主题可以帮助你更好地理解如何使用'on.click'事件来保存用户输入到JavaScript数组中。