(六)小案例银行家应用程序-删除账号-findindex方法

findindex方法和find方法非常类似,只不过findindex顾名思义,他返回的是index;

● 下面我们使用删除账号的功能来学习一下findindex的
在这里插入图片描述

● 当用户登录成功之后,可以在下方输入自己的用户名和密码,然后提交,接着用户就会被删除,用户就无法登录了

btnClose.addEventListener('click', function (e) {  //点击事件
  e.preventDefault();  //防止默认行为

  if (
    inputCloseUsername.value === currentAccount.username &&
    Number(inputClosePin.value) === currentAccount.pin   //判断输入的账号名密码是否和当前登录的账号名和密码相同
  ) {
    const index = accounts.findIndex(   //利用findindex方法去在数组中寻找当前用户的index
      acc => acc.username === currentAccount.username
    );
    accounts.splice(index, 1);  //找到index之后,通过splice方法去删除它
  }
  console.log(accounts);
});

在这里插入图片描述

● 之后我们应该清楚UI,并将输入框内容清空

btnClose.addEventListener('click', function (e) {
  e.preventDefault();

  if (
    inputCloseUsername.value === currentAccount.username &&
    Number(inputClosePin.value) === currentAccount.pin
  ) {
    const index = accounts.findIndex(
      acc => acc.username === currentAccount.username
    );
    accounts.splice(index, 1);
    containerApp.style.opacity = 0;
  }
  inputCloseUsername.value = inputClosePin = '';
});

在这里插入图片描述

之后删除的用户将无法登录;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/566494.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

在线音乐播放网站项目测试(selenium+Junit5)

在做完在线音乐播放网站项目之后,需要对项目的功能、接口进行测试,利用测试的工具:selenium以及Java的单元测试工具Junit进行测试,下面式测试的思维导图,列出该项目需要测试的所有测试用例: 测试结果&#…

flink Unsupported operand types: IF(boolean, NULL, String)

问题:业务方存储了NULL 字符串,需要处理为 null select if(anull,null,a); 结果遇到了 Unsupported operand types: IF(boolean, NULL, String),根据报错反馈,很明显应该是没有对 null 自动转换&#xff…

视频教程下载:ChatGPT驱动的SEO、网络营销、生产力提升

用户遇到的一个常见问题是在ChatGPT对话过程中难以保持清晰的目的和专注。这可能导致互动无效和浪费时间。这门课程将教给各种创意人士——艺术家、制造者、博主、讲师和内容创作者——如何制定理想的提示配方,从而产生更有成效的对话和更高的回报。 这是一门关于如…

防腐木负氧离子监测站

TH-FZ4随着生活品质的提升,人们对空气质量的要求也日益提高。在这个背景下,防腐木负氧离子监测站作为空气质量监测的重要设备,逐渐进入了人们的视野。本文将为您详细解读防腐木负氧离子监测站的工作原理,带您了解这一环保科技的魅…

SQLite FTS5 扩展(三十)

返回:SQLite—系列文章目录 上一篇:SQLite的知名用户(二十九) 下一篇:SQLite 的命令行 Shell(三十一) 1. FTS5概述 FTS5 是一个 SQLite 虚拟表模块,它为数据库应用程序提供全文搜索功能。在最基本的形式中, 全文搜索引擎允许…

Jmeter(十二) - 从入门到精通 - JMeter逻辑控制器 - 终篇(详解教程)

宏哥微信粉丝群:https://bbs.csdn.net/topics/618423372 有兴趣的可以扫码加入 1.简介 Jmeter官网对逻辑控制器的解释是:“Logic Controllers determine the order in which Samplers are processed.”。 意思是说,逻辑控制器可以控制采样…

用阿里巴巴的通义听悟,免费、快速批量制作视频字幕

阿里巴巴的通义听悟可以快速准确的将音频转为文字,那么自然也可以为视频添加字幕。 具体操作方式如下: 首先,在通义听悟中点击:新建,新建一个文件夹,然后把要添加字幕的视频都上传到这里。 如果视频存在…

LeetCode131:分割回文串

题目描述 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是 回文串。 返回 s 所有可能的分割方案。 代码 class Solution { public:vector<vector<string>> res;vector<string> path;bool isPalindrome(const string &…

分支语句和循环语句笔记

分支语句和循环语句 分支语句:if switch 循环语句 : while for do while goto语句 1. 什么是语句&#xff1f; C语句可分为以下五类&#xff1a;1.表达式语句2. 函数调用语句 3.控制语句 4.复合语句 5.空语句 控制语句用于控制程序的执行流程&#xff0c;以实现程序的各种…

如何有效利用chatgpt?

ChatGPT火爆背后蕴含着一个基本道理&#xff1a;人工智能能力得到了极大突破—大模型&#xff0c;尤其是大语言模型的能力有目共睹&#xff0c;未来只会变得更强。世界上唯一不变的就是变化。适应变化、拥抱变化、喜欢变化。“天行健&#xff0c;君子以自强不息。”我们相信未来…

DFS与回溯专题:组合总和II

DFS与回溯专题&#xff1a;组合总和II 题目链接: 组合总和II 参考题解&#xff1a;代码随想录 题目描述 代码纯享版 class Solution {public List<List<Integer>> list_all new ArrayList();public List<Integer> list new ArrayList();public List<…

Reactor 模式

目录 1. 实现代码 2. Reactor 模式 3. 分析服务器的实现具体细节 3.1. Connection 结构 3.2. 服务器的成员属性 3.2. 服务器的构造 3.3. 事件轮询 3.4. 事件派发 3.5. 连接事件 3.6. 读事件 3.7. 写事件 3.8. 异常事件 4. 服务器上层的处理 5. Reactor 总结 1…

Docker 部署网页版 vscode (code-server)

什么是 code-server code-server 是一个基于 Visual Studio Code 的开源项目&#xff0c;它允许你通过 Web 浏览器来使用 Visual Studio Code 的编辑功能。这意味着你可以在任何设备上&#xff0c;只要有浏览器和网络连接&#xff0c;就可以访问和使用 Visual Studio Code&…

【学习笔记之vue】vue项目放在springboot项目里后,刷新页面会显示whitelabel error page

vue项目放在springboot项目里后&#xff0c;刷新页面会显示whitelabel error page。 解决方案: 当你在Spring Boot项目中嵌入Vue项目&#xff0c;并且刷新页面时遇到了“Whitelabel Error Page”&#xff0c;这通常意味着Spring Boot后端没有正确地处理前端路由的请求。Vue.j…

vue3去掉el-table底部白色边框

加入下面这一行代码就行了&#xff0c;我用的是less :deep(.el-table__inner-wrapper:before) {background: none;}效果图

利用Spring Boot后端与Vue前端技术构建现代化电商平台

作者介绍&#xff1a;✌️大厂全栈码农|毕设实战开发&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 &#x1f345;获取源码联系方式请查看文末&#x1f345; 推荐订阅精彩专栏 &#x1f447;&#x1f3fb; 避免错过下次更新 Springboot项目精选实战案例 更多项目…

Git 保姆级教程(一):Git 基础

一、获取 Git 仓库 通常有两种获取 Git 项目仓库的方式&#xff1a; 1. 将尚未进行版本控制的本地目录转换为 Git 仓库&#xff1b; 2. 从其它服务器克隆 一个已存在的 Git 仓库。 两种方式都会在你的本地机器上得到一个工作就绪的 Git 仓库。 1.1 git init&#xff08;本地…

SpringBoot - java.lang.NoClassDefFoundError: XXX

问题描述 以 json-path 为例&#xff1a;java.lang.NoClassDefFoundError: com/jayway/jsonpath/Configuration 原因分析 编译不报错&#xff0c;但是运行时报错。 遇到这样类似的问题&#xff0c;首先就要想到是不是 Jar 包冲突引起的&#xff0c;或者引入的不是理想的 Jar…

shell简单联系项目

文章目录 推荐一个vscode上的好用的神奇如何使用的方式连接主机的方式配置新主机配置信息启动连接的方式 联系shell 命令的方式读取文件信息设置本地环境变量的方式获取随机数的方式简单案例信息 推荐一个vscode上的好用的神奇 如何使用的方式 连接主机的方式 配置新主机 配置…

Pytorch 学习路程 - 1:入门

目录 下载Pytorch 入门尝试 几种常见的Tensor Scalar Vector Matrix AutoGrad机制 线性回归尝试 使用hub模块 Pytorch是重要的人工智能深度学习框架。既然已经点进来&#xff0c;我们就详细的介绍一下啥是Pytorch PyTorch 希望将其代替 Numpy 来利用 GPUs 的威力&…