onclickで<i>のclassを変更するにはどうすればいいですか。

Question

Font Awesomeのiconをonclickで変更したいのですが、、、

font awesomeを使ってアイコンを使っています。クリックしたらアイコンが変更するようにしたいです。
font awesomeではクラス指定によってどのアイコンか判別しているようなのでクラスを変更することでアイコンの種類を変えられるようですがどうすれば良いのかわかりません。

該当のソースコード

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<i class="fab fa-twitter"></i>

Comments

[m.ts10806]

まずは思った通り（調べてから）組んでみてください。
これだと作業依頼と変わりません。

[yambejp]

どこを基準に、なにをクリックして、なにのなにをどう変更したいのでしょう？

Answer 1

最新の記述式ではなく、昔の書き方だとこんな感じでしょうか
最新の記述だと、[].forEach.call？？ ()=>？？　x=>？？ でわけわからないと思いますｗ

イベントリスナではなく、初心者の方でもわかりやすいイベントハンドラで書くとこうなります。
関数の引数1つ目には this でこの i 要素を指定して、2つ目の引数には、変更したい Font Awesome のクラス名を指定します。

fontawesomeChange関数は toggle関数で 交互にクラス名を変更しているだけです。

<i class="fab fa-twitter" onclick="fontawesomeChange( this, 'fa-twitter-square' )"></i>

function fontawesomeChange( element, changeClassName ) {
  element.classList.toggle(changeClassName);
}

　

1回きりなら、引数追加して

<i class="fab fa-twitter" onclick="fontawesomeChange( this, 'fa-twitter', 'fa-twitter-square' )"></i>

function fontawesomeChange( element, oldClassName, changeClassName ) {
  element.classList.replace( oldClassName, changeClassName );
}

Comments

[yambejp]

突っ込んでも仕方ないですがclassListも最新の書き方の一つだと思いますが・・・

[pinoko]

そうでした
困りました

Answer 2

とりあえず

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  [].forEach.call(document.querySelectorAll('.fab'),x=>{
    x.addEventListener('click',()=>{
      if(x.classList.contains("fa-twitter")){
        x.classList.replace("fa-twitter","fa-twitter-square");
      }else{
        x.classList.replace("fa-twitter-square","fa-twitter");
      }
    });
  });
});
</script>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<i class="fab fa-twitter"></i>
<i class="fab fa-twitter-square"></i>

Comments

[taiyakix]

codepenで上手く動きました。ありがとうございました。正直コードを見ても理解できない自分がいるので、もっと学習してまともな質問をできるように頑張ります。おバカな中一ですみません