JavaScriptの.classList.add()でクリックすると表示が変わる申込ボタン

2022年8月21日 5分

そんなに難しい処理をJavaScriptでさせるのではなく、クリックでclassを付け替えで表示を変えるだけの簡単な処理内容です。

是非参考にしてみてください。

.classList.add()
クリックすると表示が変わる申込ボタンのサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

.classList.add()

JavaScriptの .classList.add() は、要素に対してclassの追加を行うメソッドです。

element.classList.add(クラス名);

かかかず

簡単で便利なメソッドです。

この記事では、ボタンクリック時にこのメソッドでclassを付与して表示を変えていきます。

クリックすると表示が変わる申込ボタンのサンプル

早速サンプルです。

ボタンを一回クリックすると「申込みが完了しました」に変わります。また、ボタンクリック前の「申込み」にして動作を見たい場合は、ページを再読み込みしてみてください。

かかかず

ちょっとしたアニメーションで表示が変わるボタンです。

実装の手順と方法

コードの解説の前に、ざっくりとした実装の手順と方法について解説します。

HTMLを記述

まずはじめに、HTMLを記述します。

コードを表示

<button id="changeBtn"><span>申込み</span><span>申込みが完了しました</span></button>

JavaScriptを記述

次にJavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

// ボタンを取得
const btn = document.getElementById('changeBtn');
// ボタンクリックで処理開始
btn.addEventListener('click', () => {
  // ボタンにclassを追加
  btn.classList.add('finishChange');
// 処理は一回のみ
},{ once: true });

CSSを記述

最後に、CSSで見た目を整えて完了です。

コードを表示

/* ボタン */
button#changeBtn {
    border: none;
    background: #6bb6ff;
    color: #fff;
    font-weight: 600;
    display: flex;
    justify-content: center;
    padding: 14px 32px;
    letter-spacing: 0.04rem;
    border-radius: 9999px;
    margin: 0 auto;
    transition: 0.3s all;
    box-shadow: 0 2px 3px rgb(0 0 0 / 20%), 0 2px 3px -2px rgb(0 0 0 / 15%);
    min-width: 300px;
    font-size: 1.1rem;
    height: 55px;
}
/* ボタンのhover時 */
button#changeBtn:hover {
    box-shadow: 0 13px 20px -3px rgb(0 0 0 / 24%);
}
/* ボタンのspanタグ内をtransitionでゆっくりと */
button#changeBtn span {
    transition: 0.3s all;
}
/* ボタン中の二個目のspanタグは非表示 */
button#changeBtn span:nth-child(2) {
    width: 0;
    position: absolute;
    opacity: 0;
}
/* ボタンクリックでclass追加後 */
button#changeBtn.finishChange {
    background: #eee;
    color: #707070;
    box-shadow: 0 1px 1px rgb(0 0 0 / 12%), 0 0px 0px -2px rgb(0 0 0 / 15%);
    pointer-events: none;
}
/* ボタンクリックで最初のspanタグを非表示 */
button#changeBtn.finishChange span:first-child {
    display: none;
}
/* ボタンクリックで二個目のspanタグを変化させて表示 */
button#changeBtn.finishChange span:nth-child(2) {
    width: 100%;
    position: relative;
    opacity: 1;
}
/* ボタンクリックでfontawesomeのチェックを表示 */
button#changeBtn.finishChange span:nth-child(2):before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.1em;
    position: relative;
    margin-right: 10px;
    opacity: 0.4;
}

ざっくりとしたコードの解説

コードは、HTMLの「button タグのボタン」と、JavaScriptの「クリックでclassをつける処理」。そして、「表示の切り替え」のCSSで3種です。

順に解説していきます。

HTML

HTMLは、button タグの中に span タグが二つ並んだ構造です。

<button id="changeBtn"><span>申込み</span><span>申込みが完了しました</span></button>

二つの span タグは、1個目がクリックされる前の要素。2個目がボタンクリックで表示になる要素で、CSSのclass付与で表示・非表示を切り替えます。

JavaScript

JavaScriptは、初めに「changeBtn」のid名を持つ要素を取得して、その後に .addEventListener のクリックで処理を開始します。

// ボタンを取得
const btn = document.getElementById('changeBtn');
// ボタンクリックで処理開始
btn.addEventListener('click', () => {
  // ボタンにclassを追加
  btn.classList.add('finishChange');
// 処理は一回のみ
},{ once: true });

処理内容は、クリックしたボタンに「finishChange」のclass名を付与して、それに連動させて中の要素の span タグをCSSで表示・非表示を切り替えます。

かかかず

なので後述するCSSのコードが多めのスニペットです。

CSS

CSSは、HTMLの構造に準じて button と span タグが主ですが、擬似クラスと擬似要素を使います。

/* ボタン */
button#changeBtn {
    border: none;
    background: #6bb6ff;
    color: #fff;
    font-weight: 600;
    display: flex;
    justify-content: center;
    padding: 14px 32px;
    letter-spacing: 0.04rem;
    border-radius: 9999px;
    margin: 0 auto;
    transition: 0.3s all;
    box-shadow: 0 2px 3px rgb(0 0 0 / 20%), 0 2px 3px -2px rgb(0 0 0 / 15%);
    min-width: 300px;
    font-size: 1.1rem;
    height: 55px;
}
/* ボタンのhover時 */
button#changeBtn:hover {
    box-shadow: 0 13px 20px -3px rgb(0 0 0 / 24%);
}
/* ボタンのspanタグ内をtransitionでゆっくりと */
button#changeBtn span {
    transition: 0.3s all;
}
/* ボタン中の二個目のspanタグは非表示 */
button#changeBtn span:nth-child(2) {
    width: 0;
    position: absolute;
    opacity: 0;
}
/* ボタンクリックでclass追加後 */
button#changeBtn.finishChange {
    background: #eee;
    color: #707070;
    box-shadow: 0 1px 1px rgb(0 0 0 / 12%), 0 0px 0px -2px rgb(0 0 0 / 15%);
    pointer-events: none;
}
/* ボタンクリックで最初のspanタグを非表示 */
button#changeBtn.finishChange span:first-child {
    display: none;
}
/* ボタンクリックで二個目のspanタグを変化させて表示 */
button#changeBtn.finishChange span:nth-child(2) {
    width: 100%;
    position: relative;
    opacity: 1;
}
/* ボタンクリックでfontawesomeのチェックを表示 */
button#changeBtn.finishChange span:nth-child(2):before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.1em;
    position: relative;
    margin-right: 10px;
    opacity: 0.4;
}

button タグ内に入れ子にしている二つの span タグは、擬似クラスの :first-child で1個目。:nth-child(2) で2個目を指定して、スタイルをそれぞれあてます。

かかかず

ボタンクリック後のチェックマークはFontawesomeです。