选择与 nchange 做出反应 - Javascript

选择和改变表单元素时，我们可以使用 JavaScript 来创建交互式用户体验。在本文中，我们将讨论如何使用选择器和事件处理程序来对选择和更改表单元素做出反应。

选择表单元素

在 JavaScript 中，我们可以使用 document.querySelector() 或 document.querySelectorAll() 来选择表单元素。其中 querySelector() 可以选择单个元素，而 querySelectorAll() 可以选择多个元素。

// 选择单个元素
const input = document.querySelector('input[type="text"]');

// 选择多个元素
const checkboxes = document.querySelectorAll('input[type="checkbox"]');

改变表单元素的值

我们可以使用 JavaScript 来更改表单元素的值。例如，我们可以设置文本框的值或切换复选框的选中状态。

// 设置文本框的值
input.value = 'Hello World';

// 切换复选框的选中状态
checkboxes[0].checked = true;

事件处理程序

要对表单元素的选择和更改做出反应，我们需要使用事件处理程序。在 JavaScript 中，我们可以使用 addEventListener() 来添加事件处理程序。

// 添加事件处理程序
input.addEventListener('change', function() {
  console.log('输入框的值已更改');
});

checkboxes[0].addEventListener('change', function() {
  console.log('复选框的选中状态已更改');
});

在上面的示例中，我们添加了 change 事件处理程序，每当文本框的值或复选框的选中状态更改时，都会触发该处理程序。在实际应用中，我们可以根据需要使用不同的事件处理程序，如 click、submit 、keydown 等等。

总之，选择器和事件处理程序是 JavaScript 中用于对表单元素选择和更改做出反应的常用工具。使用它们可以创建出更加交互式的用户体验。