JavaScript第十一讲：DOM编程“事件”练习题

本文主要是介绍JavaScript第十一讲：DOM编程“事件”练习题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

上一节有本部分的内容讲解，有需要的码客们可以看看

练习题描述：

编写一个HTML表单，用户可以在其中输入一个账号。当用户点击“检查账号”按钮时，使用JavaScript来验证该账号是否存在于一个预定义的账号列表中。如果存在，则显示“账号已存在”；如果不存在，则显示“账号可用”。

HTML源代码：

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <title>验证账号是否已存在</title>  <script>  // 预定义的账号列表  const existingAccounts = ['user123', 'example', 'test', 'newuser'];  function checkAccount() {  // 获取用户输入的账号  const accountInput = document.getElementById('accountInput').value;  // 检查账号是否存在  if (existingAccounts.includes(accountInput)) {  document.getElementById('message').textContent = '账号已存在';  } else {  document.getElementById('message').textContent = '账号可用';  }  }  </script>  
</head>  
<body>  <h2>验证账号是否已存在</h2>  <form>  <label for="accountInput">请输入账号：</label>  <input type="text" id="accountInput" placeholder="Enter account">  <button type="button" onclick="checkAccount()">检查账号</button>  </form>  <p id="message"></p>  
</body>  
</html>

在这个示例中，我们首先定义了一个预定义的账号列表existingAccounts。然后，我们创建了一个checkAccount函数，该函数在用户点击“检查账号”按钮时被调用。这个函数会获取用户输入的账号，并检查它是否存在于existingAccounts列表中。根据检查结果，它会更新页面上的message元素的文本内容。