Javascript Can'；不要同时从awesomefont更改文本和图标

我知道这很简单，但我不明白为什么它不能工作 我只需要改变一个按钮的标签（与可怕的图标内）与非常简单的javascript如下。 在只有一件事情（图标或文本）的情况下，此代码也可以工作，但如果我尝试同时更改这两件事情，则会导致错误

Uncaught TypeError: Cannot read property 'classList' of null

HTML

---

您正在设置

button

元素的

innerHTML

，即删除其中的

元素。设置

i

的

innerHTML

var-button=document.querySelector（“##_-edit”）；
按钮。addEventListener（'click'，函数（事件）{
buttonChageState（事件，此）；
}，假）；
功能按钮状态（事件、目标）{
这是buttonState；
icon=target.querySelector（'i'）；
if（this.buttonState==0 | | typeof（this.buttonState）==“未定义”）{
icon.classList.remove（“fa-pencil-square-o”）；
icon.classList.add（“fa-ban”）；
icon.innerHTML=“取消”；
this.buttonState=1；
}else if（this.buttonState==1）{
icon.classList.remove（“fa-ban”）；
icon.classList.add（“fa-pencil-square-o”）；
icon.innerHTML=“编辑”；
this.buttonState=0；
}
}

按钮试验台
编辑

问题是在本例中使用了“this”和target.innerHTML。请改用此代码：

var icon = target.querySelector('i');

及

在这里拉小提琴：

---

如果不知道如何使用，请不要使用

此
。）从变量中删除它declaration@hoanganh17b欢迎如果这个答案对你有帮助，请接受这个答案
var button = document.querySelector('#_edit');
button.addEventListener('click', function(event) {
    buttonChageState(event, this);
}, false);

function buttonChageState(event, target) {
    this.buttonState ;
    // console.log('event:', event);
    // console.log('target', target);

    this.icon = target.querySelector('i');
    if (this.buttonState == 0 || typeof (this.buttonState) == 'undefined') {
        console.log('this.buttonState:', this.buttonState);
        icon.classList.remove("fa-pencil-square-o");
        icon.classList.add("fa-ban");
        target.innerHTML = "Cancel";

        this.buttonState = 1;
    } else if(this.buttonState==1) {
        console.log('this.buttonState:', this.buttonState);
        icon.classList.remove("fa-ban");
        icon.classList.add("fa-pencil-square-o");
        target.innerHTML = "Edit";

        this.buttonState = 0;
    }
}

var icon = target.querySelector('i');

icon.innerHTML = "Cancel";