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

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

    
    
    
    
    



     Keyword: 
   
 


 

     CAS: 
 
 

     MW: 
 
   
    点击加载

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

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

调用对应的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 = '';
        ......
}