html按钮传this,button通过this绑定onclick事件

初学前端，遇到了一个问题，请指教: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] + "";

}/*οnclick='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：

IFE JavaScript Task 01

城市名称：

空气质量指数：

确认添加

[1]: /im

g/bVDmlE