お世話になっております。javascript初心者です。どうぞよろしくお願いいたします。
下記サイトにて公開されているJSですが、複数回showSpinner()、hideSpinner()と交互に呼び出す場合に、下記画像のようにspinnerが出てこないバグが生じます。document.getElementsByClassName('.kintone-spinner')のところで、class指定にドットがついていますが、getElementsByClassNameの場合はドットは不要かと思うので、恐らくdocument.getElementsByClassName('kintone-spinner')とすべきかと思うのですが、有識者の方ご教示いただけると幸いです。よろしくお願いいたします。
spin.jsを使って、スピナー（ローディングアイコン）を設定しよう！
/**
* スピナー設置用の関数
**/
// スピナーを動作させる関数
const showSpinner = () => {
// 要素作成等初期化処理
if (document.getElementsByClassName('.kintone-spinner').length === 0) {
// スピナー設置用要素の作成
const spinDiv = document.createElement('div');
spinDiv.id = 'kintone-spin';
spinDiv.classList.add('kintone-spinner');
// スピナーと背景要素の作成
const spinBgDiv = document.createElement('div');
spinBgDiv.id = 'kintone-spin-bg';
spinBgDiv.classList.add('kintone-spinner');
// スピナー用要素をbodyにappend
document.body.appendChild(spinDiv);
document.body.appendChild(spinBgDiv);
// スピナー動作に伴うスタイル設定
spinDiv.style.cssText = 'position: fixed; top: 50%; left: 50%; z-index: 510; background-color: #fff; padding: 26px; border-radius: 4px;';
spinBgDiv.style.cssText = 'position: fixed; top: 0px; left: 0px; z-index: 500; width: 100%; height: 100%; background-color: #000; opacity: 0.5;';
// スピナーに対するオプション設定
const opts = {
color: '#000'
};
// スピナーを作動
new Spinner(opts).spin(document.getElementById('kintone-spin'));
}
document.querySelectorAll('.kintone-spinner').forEach(element => {
element.style.display = 'block';
});
};
// スピナーを停止させる関数
const hideSpinner = () => {
// スピナー停止（非表示）
document.querySelectorAll('.kintone-spinner').forEach(element => {
element.style.display = 'none';
});
};