js实时监听input输入框值的变化

实习日记之通过调用common chemistry的api接口实现输入keyword查找cas号和mw。做了一个简单的html网页,用到了ajax技术。比较简单,适合刚入门的宝学习参考。代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="application/javascript">function onInputChange(event){console.log(event.target.value);if(event.target.value == ''){document.getElementById("cas").innerText = '';document.getElementById("mw").innerText = '';}}function loadCAS() {// document.getElementById("cas").innerText = '';// document.getElementById("mw").innerText = '';var flag = 1;var searchurl = 'https://commonchemistry.cas.org/api/search?q='; // 获取 JSON 数据的链接var request;if (window.XMLHttpRequest) {request = new XMLHttpRequest(); //发送 Ajax 请求,适用于 Chrome, mozilla 等浏览器 } else if (window.ActiveXObject) {request = new ActiveXObject("Microsoft.XMLHTTP"); // 发送 Ajax 请求,适用于 IE 浏览器 }var keyword = document.getElementById("keyword").value;searchurl += encodeURIComponent(keyword);request.open("GET", searchurl, false);request.onreadystatechange = function() {if (request.readyState == 4 && request.status == 200) {var response = request.responseText;console.log(JSON.parse(response));if(JSON.parse(response).count.toString() =='0'){document.getElementById("cas").innerText = '暂无数据';flag  = 0;}else{document.getElementById("cas").innerHTML = JSON.parse(response).results[0].rn;}}else if(request.readyState == 4 && request.status == 404){}}request.send();if(flag == 1){loadMW();}}function loadMW(){var detailurl = 'https://commonchemistry.cas.org/api/detail?cas_rn='; // 获取 JSON 数据的链接var request;if (window.XMLHttpRequest) {request = new XMLHttpRequest(); //发送 Ajax 请求,适用于 Chrome, mozilla 等浏览器 } else if (window.ActiveXObject) {request = new ActiveXObject("Microsoft.XMLHTTP"); // 发送 Ajax 请求,适用于 IE 浏览器 }var cas = document.getElementById("cas").innerText.toString();console.log('loadMW-cas:'+cas);detailurl += encodeURIComponent(cas);request.open("GET", detailurl, false);request.onreadystatechange = function() {if (request.readyState == 4 && request.status == 200) {var response = request.responseText;console.log(JSON.parse(response));document.getElementById("mw").innerHTML = JSON.parse(response).molecularMass;}else if(request.readyState == 4 && request.status == 404){}}request.send();}</script></head>
<body><label for="keyword"> Keyword: </label><input type="text" id="keyword" name="keyword"  oninput="onInputChange(event)" ><br><div>CAS: <span id="cas"></span></div><div>MW: <text id="mw"></text></div><button type="button" onclick="loadCAS()">点击加载</button></body></html>

过程中遇到的问题:当我清空keyword值后,上一次搜索的cas和mw依然存在。

方案一:js实时监听input输入框值的变化,需要用到input监听事件:

   <input type="text" id="keyword" name="keyword"  oninput="onInputChange(event)" >

调用对应的js监听函数:

 function onInputChange(event){console.log(event.target.value);if(event.target.value == ''){document.getElementById("cas").innerText = '';document.getElementById("mw").innerText = '';}}

刚开始在这里踩了个坑,我以为event.target.value的值是null,所以条件写成了if(event.target.value == null),数据一直无法清空。后来我改成了空字符串if(event.target.value == '')就对了。

方案二:在点击加载按钮的时候,先将元素内容清空再进行ajax请求,直接在点击事件触发的方法里清空数据即可。

//点击事件 
function loadCAS() {document.getElementById("cas").innerText = '';document.getElementById("mw").innerText = '';......
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu22.04 双系统安装、配置及常用设置

Ubuntu双系统安装、配置及常用设置 前期准备下载Ubuntu系统镜像下载镜像文件写入工具制作Ubuntu启动盘磁盘分区更改 BIOS 引导模式 安装系统更改回原来的 BIOS 参数配置 Ubuntu 系统配置源同步Windows和Ubuntu系统时间更改启动菜单的默认项添加右键新建文本文档在桌面上创建软件…

【HBuilder + IDEA + XFtp + XShell】打包部署上线

简述 前后端分离&#xff1a;需要将前后端的程序包打包发送至应用Linux服务器上Linux服务器 &#xff08;1&#xff09;需要启用SSHD服务&#xff0c;该服务会监听22号端口&#xff08;一般是开启的&#xff09; &#xff08;2&#xff09;搭建&#xff1a;MYSQL、Nginx、jdk、…

《HelloGitHub》第 93 期

兴趣是最好的老师&#xff0c;HelloGitHub 让你对编程感兴趣&#xff01; 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等&#xff0c;涵盖多种编程语言 Python、Java、Go、C/C、Swift...让你在短时间内…

[Angular] 笔记 18:Angular Router

Angular Router 视频 chatgpt&#xff1a; Angular 具有内置的大量工具、功能和库&#xff0c;功能强大且经过良好设计&#xff0c;如组件化架构、依赖注入、模块化系统、路由和HTTP客户端等。这些功能可以直接用于项目中&#xff0c;无需额外的设置或第三方库。这简化了开发流…

显示器与按键(LCD 1602 + button)

一、实验目的&#xff1a; &#xff08;1&#xff09;学习lcd 1602的编程与使用、 &#xff08;2&#xff09;机械式复位开关button软件消抖的方法。 二、实验内容&#xff1a; 1、必做&#xff1a;先显示开机画面&#xff0c;&#xff1a;在1602显示器上&#xff0c;分两行…

Windows自动化之UIautomation(一)

一、UIAutomation的工作原理&#xff1a; UIAutomation操作程序时会给程序发送WM_GETOBJECT消息&#xff0c;如果程序处理WM_GETOBJECT消息&#xff0c;实现UI Automation Provider,并调用函数 UiaReturnRawElementProvider(HWND hwnd,WPARAM wparam,LPARAM lparam,IRawElemen…

白话机器学习的数学-2-分类

1、设置问题 图片分类&#xff1a;只根据尺寸把它分类为 纵向图像和横向图像。 如果只用一条线将图中白色的点和黑色的点分开&#xff1a; 这次分类的目的就是找到这条线。 2、内积 找到一条线&#xff0c;这是否意味着我们要像学习回归时那样&#xff0c;求出一次函数的斜率…

关于 K8s 的一些基础概念整理

〇、前言 Kubernetes&#xff0c;将中间八个字母用数字 8 替换掉简称 k8s&#xff0c;是一个开源的容器集群管理系统&#xff0c;由谷歌开发并维护。它为跨主机的容器化应用提供资源调度、服务发现、高可用管理和弹性伸缩等功能。 下面简单列一下 k8s 的几个特性&#xff1a; 自…

学习笔记-MyBatis的工作原理。

Mybatis的工作原理 读取MyBatis配置文件&#xff1a;mybatis-config.xml为MyBatis的全局配置文件&#xff0c;配置了MyBatis的运行环境等信息&#xff0c;例如数据库连接信息。加载映射文件。映射文件即SQL映射文件&#xff0c;该文件中配置了操作数据库的SQL语句&#xff0c;…

如何使用人工智能算法解决实际业务问题?

使用人工智能算法解决实际业务问题的过程可以概括为以下几个步骤&#xff1a; 问题定义和数据采集&#xff1a;首先&#xff0c;需要明确业务问题&#xff0c;并收集相关的数据&#xff0c;包括结构化和非结构化数据。这些数据可以来自不同的来源&#xff0c;如数据库、文本、图…

clickhouse连接工具dbeaver

地址 地址&#xff1a; Download | DBeaver Community 安装 表引擎 表引擎之TinyLog 以列文件的形式保存在磁盘上&#xff0c;不支持索引&#xff0c;没有并发控制。一般保存少量数据的小表&#xff0c; 生产环境上作用有限&#xff0c;多用于平时练习测试用。 内存引擎&am…

k8s 架构

主要组件 k8s有如下的主要组件&#xff1a; Control plane(s) and worker node(s)OperatorsServicesPods of containersNamespaces and quotasNetwork and policiesStorage. 一个k8s集群是有一个或多个 cp&#xff08;控制平面&#xff09;节点和一组worker 节点组成的。这个…

GaussDB数据库中的同义词SYNONYM

目录 一、前言 二、GasussDB数据库中的Synonym 1、Synonym的概念 2、语法介绍 3、Synonym的用途 三、Synonym在GaussDB数据库中是如何使用的 1、表的同义词使用&#xff08;示例&#xff09; 2、视图的同义词使用&#xff08;示例&#xff09; 3、函数的同义词使用&am…

Redis实现滚动周榜|滚动榜单|直播间榜单|排行榜|Redis实现日榜05

方法&#xff1a;写当日榜单当日滚动榜次日滚动榜定时任务处理历史数据 实际上&#xff0c;这个步骤并不复杂&#xff0c;主要是为了解决定时数据在时间间隔切换时无法平滑过渡的问题。具体来说&#xff0c;在编写代码时&#xff0c;我们需要执行以下三个操作。 获取7天、30天…

LeetCode1232. Check If It Is a Straight Line

文章目录 一、题目二、题解 一、题目 You are given an array coordinates, coordinates[i] [x, y], where [x, y] represents the coordinate of a point. Check if these points make a straight line in the XY plane. Example 1: Input: coordinates [[1,2],[2,3],[3,…

YOLO训练results.csv文件可视化(原模型与改进模型对比可视化)

一、单独一个文件可视化&#xff08;源码对应utils文件夹下的plots.py文件的plot_results类&#xff09; from pathlib import Path import matplotlib.pyplot as plt import pandas as pd def plot_results(fileruns/train/exp9/results.csv, dir):# Plot training results.c…

前后端分离nodejs+vue医院预约挂号系统6nrhh

医院预约挂号系统主要有管理员、用户和医生三个功能模块。以下将对这三个功能的作用进行详细的剖析。 运行软件:vscode 前端nodejsvueElementUi 语言 node.js 框架&#xff1a;Express/koa 前端:Vue.js 数据库&#xff1a;mysql 开发软件&#xff1a;VScode/webstorm/hbuiderx均…

ubuntu下的磁盘管理

1. 磁盘文件目录 磁盘文件是linux下的/dev/sd*文件 2. 磁盘和目录容量查询 df&#xff1a;列出文件系统的使用量,主要查看文件系统的使用量 du&#xff1a;评估文件系统的磁盘使用量&#xff0c;主要是单个文件大小 3. 磁盘的挂载与卸载 mount&#xff1a;磁盘挂载 mount…

YOLOv8改进 | 细节创新篇 | iAFF迭代注意力特征融合助力多目标细节涨点

一、本文介绍 本文给大家带来的改进机制是iAFF&#xff08;迭代注意力特征融合&#xff09;&#xff0c;其主要思想是通过改善特征融合过程来提高检测精度。传统的特征融合方法如加法或串联简单&#xff0c;未考虑到特定对象的融合适用性。iAFF通过引入多尺度通道注意力模块(我…

JDK9及之后版本使用 jlink 生成定制化的 JRE

许多java软件的运行需要依赖jre&#xff0c;在 jdk8 之后&#xff0c;不再提供默认的 jre&#xff0c;后续如果项目中还是想用 jre 的形式发布软件&#xff0c;那么可以使用 jlink 工具生成 jre。 一、jlink 命令详解 jlink 二、查看jdk中包含的所有模块 如果在 jdk 安装文件夹…