初学前端，遇到了一个问题，请指教:delBtnHandle(obj)这里会报错，并没有绑定上点击事件
图片描述

task.js：

/**
 * aqiData，存储用户输入的空气指数数据
 * 示例格式：
 * aqiData = {
 *    "北京": 90,
 *    "上海": 40
 * };
 */
var aqiData = {};

/**
 * 从用户输入中获取数据，向aqiData中增加一条数据
 * 然后渲染aqi-list列表，增加新增的数据
 */
function addAqiData() {
    var city = document.getElementById("aqi-city-input").value;
    var point = document.getElementById("aqi-value-input").value;
    eval("aqiData." + city + " = " + point);
}

/**
 * 渲染aqi-table表格
 */
function renderAqiList() {
    var textval = "城市空气质量操作";
    var targetTable = document.getElementById("aqi-table");
    for(var key in aqiData){
        textval += "" + key + "" + aqiData[key] + "";
    }/*onclick='delBtnHandle(this)'*/
    targetTable.innerHTML = textval;
}

/**
 * 点击各个删除按钮的时候的处理逻辑
 * 获取哪个城市数据被删，删除数据，更新表格显示
 */
 delBtnHandle(obj){
  // do sth.
  var rowNum = obj.parentNode.parentNode.rowIndex;
  var targetkey = obj.parentNode.parentNode.firstChild.innerHTML;
  delete aqiData[targetkey];
  document.getElementById("aqi-table").deleteRow(rowNum);
}
/**
 * 点击add-btn时的处理逻辑
 * 获取用户输入，更新数据，并进行页面呈现的更新
 */
function addBtnHandle() {
  addAqiData();
  renderAqiList();
  document.getElementById("aqi-city-input").value = "";
  document.getElementById("aqi-value-input").value = "";
  document.getElementsByClassName("delBtn").onclick = function(){
      delBtnHandle(this);
  }
}


function init() {

  // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
    document.getElementById("add-btn").onclick = function(){
        addBtnHandle();
    }
  // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数
    

}

window.onload = function(){
    init();
}

task.html：

  
    
    
    
  


  

    城市名称：

    空气质量指数：

    确认添加
  
  





  [1]: /im

g/bVDmlE