if分条件式の動作について

if文の記述箇所によってifの動作が変わる

下記ソースコードにてifの動作を確認したのですが、どちらも同じ内容であるのに
なぜ動作したりする場合と、そうでない場合があるのでしょうか。

if文の優先順位を考えてみましたが、今回のケースは後でも先でも最終的に
(cks.checked == true)の条件を満たしていなければ問題無いと思うのですが、
どうなのでしょうか。

宜しくお願い致します。

ifとelse ifでの条件式の場合

** if (cks.checked == true)の条件式を満たしていなくても、else ifが動作しない。**

JavaScript
1fontUp.onclick = (e) => { 
2           const checkAll = document.querySelectorAll('.ip-check');
3           if(inputFont.value >= 64) {
4               alert('64以上の数値は入力できません')
5               return;
6           } 
7           for (const cks of checkAll) {
8               if (cks.checked == true) {  
9                   console.log('true');
10                   console.log(checkAll.length);
11                   cks.nextElementSibling.style.fontSize = Number(inputFont.value) + 'px';
12               } else if (!document.querySelector('.ip-check')) {
13                   console.log('false');
14                t.style.fontSize = Number(inputFont.value) + 'px';
15               }
16           }        
17           inputFont.value = Number(inputFont.value) + 1;
18       }

ifが二つある場合

ifはどちらも動作する。

JavaScript
1        fontUp.onclick = (e) => { 
2            const checkAll = document.querySelectorAll('.ip-check');
3            if(inputFont.value >= 64) {
4                alert('64以上の数値は入力できません')
5                return;
6            } 
7           if (!document.querySelector('.ip-check')) {
8                    console.log('false');
9                 t.style.fontSize = Number(inputFont.value) + 'px';
10            }
11            for (const cks of checkAll) {
12                if (cks.checked == true) {  
13                    console.log('true');
14                    console.log(checkAll.length);
15                    cks.nextElementSibling.style.fontSize = Number(inputFont.value) + 'px';
16                } 
17            }        
18            inputFont.value = Number(inputFont.value) + 1;
19        }

m.ts10806

2021/04/09 05:37

htmlを提示してください

rei78087487

2021/04/10 01:13 編集

下記URLになります。 https://codepen.io/mio-rei/pen/GRryWWW 操作方法：ダブルクリック　要素が作製される右クリック　メニュー表示メニューで文字の大きさを選択(mousemove) 文字の大きさメニューが表示されるのでap-arrow.downをクリックする文字の大きさが変化する。要素の選択を選ぶチェックボックスにチェックを入れる。文字の大きさメニューが表示されるのでap-arrow.downをクリックする文字の大きさが変化する。上記内容で前述したJavaScriptの内容が確認できると思います。宜しくお願い致します。