CODEWITHSUNDEEP
javascripthtmlfont-awesome
hoanganh17b
hoanganh17b

Reputation: 867

Can't change text and icon from awesomefont as same time

I know it is very simple but I can't understand why it can't work I just need change lable of a button (with awesome icon inside) with very simple javascript as bellow. In case of just only one thing (icon or text), this code work as well but if I attempt to change both, it causes error

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;
    }
}

Upvotes: 1

Views: 395

Answers (2)

Tushar
Tushar

Reputation: 87203

You're setting the innerHTML of button element, that is removing the <i> element inside that. Set the innerHTML of i.

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;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />
<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"> Edit</i> 
  </button>
</div>

Upvotes: 1

Kirill Husiatyn
Kirill Husiatyn

Reputation: 828

The problem is that you used 'this' and target.innerHTML in this case. Use this code instead:

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

and

icon.innerHTML = "Cancel";

fiddle here: http://jsfiddle.net/kikill/2pLwyaxm/

Upvotes: 2

Related Questions