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

2024-06-07 07:20

本文主要是介绍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元素的文本内容。

结语

今天的内容就到这里,各位大佬们,respect!

这篇关于JavaScript第十一讲:DOM编程“事件”练习题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1038516

相关文章

Spring Boot中的路径变量示例详解

《SpringBoot中的路径变量示例详解》SpringBoot中PathVariable通过@PathVariable注解实现URL参数与方法参数绑定,支持多参数接收、类型转换、可选参数、默认值及... 目录一. 基本用法与参数映射1.路径定义2.参数绑定&nhttp://www.chinasem.cnbs

JAVA中安装多个JDK的方法

《JAVA中安装多个JDK的方法》文章介绍了在Windows系统上安装多个JDK版本的方法,包括下载、安装路径修改、环境变量配置(JAVA_HOME和Path),并说明如何通过调整JAVA_HOME在... 首先去oracle官网下载好两个版本不同的jdk(需要登录Oracle账号,没有可以免费注册)下载完

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

Java中Integer128陷阱

《Java中Integer128陷阱》本文主要介绍了Java中Integer与int的区别及装箱拆箱机制,重点指出-128至127范围内的Integer值会复用缓存对象,导致==比较结果为true,下... 目录一、Integer和int的联系1.1 Integer和int的区别1.2 Integer和in

SpringSecurity整合redission序列化问题小结(最新整理)

《SpringSecurity整合redission序列化问题小结(最新整理)》文章详解SpringSecurity整合Redisson时的序列化问题,指出需排除官方Jackson依赖,通过自定义反序... 目录1. 前言2. Redission配置2.1 RedissonProperties2.2 Red

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

JSONArray在Java中的应用操作实例

《JSONArray在Java中的应用操作实例》JSONArray是org.json库用于处理JSON数组的类,可将Java对象(Map/List)转换为JSON格式,提供增删改查等操作,适用于前后端... 目录1. jsONArray定义与功能1.1 JSONArray概念阐释1.1.1 什么是JSONA

Java JDK1.8 安装和环境配置教程详解

《JavaJDK1.8安装和环境配置教程详解》文章简要介绍了JDK1.8的安装流程,包括官网下载对应系统版本、安装时选择非系统盘路径、配置JAVA_HOME、CLASSPATH和Path环境变量,... 目录1.下载JDK2.安装JDK3.配置环境变量4.检验JDK官网下载地址:Java Downloads

Spring boot整合dubbo+zookeeper的详细过程

《Springboot整合dubbo+zookeeper的详细过程》本文讲解SpringBoot整合Dubbo与Zookeeper实现API、Provider、Consumer模式,包含依赖配置、... 目录Spring boot整合dubbo+zookeeper1.创建父工程2.父工程引入依赖3.创建ap