我知道这很简单,但我无法理解为什么它无法运作 我只需要更改一个按钮(内部有很棒的图标),非常简单的javascript如下所示。 如果只有一件事(图标或文本),此代码也可以工作,但如果我尝试更改两者,则会导致错误
Uncaught TypeError: Cannot read property 'classList' of null
HTML
<body>
<h1 class="text-center">Button Test Bed</h1>
<div class="container-fluid">
<button type="button" class="btn btn-default go" id='_edit'><i class="fa fa-pencil-square-o"></i> Edit</button>
</div>
</body>
的Javascript
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;
}
}
答案 0 :(得分:2)
问题是你在这种情况下使用了'this'和target.innerHTML。请改用此代码:
var icon = target.querySelector('i');
和
icon.innerHTML = "Cancel";
答案 1 :(得分:1)
您正在设置innerHTML
button
元素,即删除其中的<i>
元素。设置innerHTML
的{{1}}。
i
&#13;
var button = document.querySelector('#_edit');
button.addEventListener('click', function(event) {
buttonChageState(event, this);
}, false);
function buttonChageState(event, target) {
this.buttonState;
icon = target.querySelector('i');
if (this.buttonState == 0 || typeof(this.buttonState) == 'undefined') {
icon.classList.remove("fa-pencil-square-o");
icon.classList.add("fa-ban");
icon.innerHTML = " Cancel";
this.buttonState = 1;
} else if (this.buttonState == 1) {
icon.classList.remove("fa-ban");
icon.classList.add("fa-pencil-square-o");
icon.innerHTML = " Edit";
this.buttonState = 0;
}
}
&#13;