Question

我知道这很简单，但我无法理解为什么它无法运作我只需要更改一个按钮（内部有很棒的图标），非常简单的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;
    }
}

Answer 1

问题是你在这种情况下使用了'this'和target.innerHTML。请改用此代码：

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

和

icon.innerHTML = "Cancel";

在这里小提琴： http://jsfiddle.net/kikill/2pLwyaxm/

Answer 2

您正在设置innerHTML button元素，即删除其中的<i>元素。设置innerHTML的{{1}}。

＆＃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;

无法同时从awesomefont更改文本和图标

2 个答案: