WordPressのHTMLブロックでJavaScriptが動かない｜実行順序の罠と、&& が消える罠

原因

JavaScriptパネルに書いたコードが、HTMLパネルの内容よりも先に実行されているのです。

以前はHTMLブロックの中に、こう書いていたはずです。

<div id="box">...</div>
<script>
  var box = document.getElementById('box');   // ちゃんと見つかる
</script>

ブラウザは上から読むので、書いた順番がそのまま実行順番でした。だから何も考えずに済んでいたのです。
ところが3つのパネルに分けると、HTMLとJavaScriptがどの順番で出力されるかが見えなくなります。私の環境では、JavaScriptのほうが先に実行されました。だからJavaScriptが部品を探しに行ったとき、そのHTMLはまだ生まれていなかったのです。

解決：HTMLの準備を待つ

document.addEventListener('DOMContentLoaded', function () {
	var box = document.getElementById('box');
	if (!box) return;

	// ここに本来やりたい処理を書く
});

これは特別な対処ではありません。外部のJavaScriptファイルを書くときの、ごく普通の作法です。

3つのパネルに分かれたことで、JavaScriptは「HTMLに埋め込まれたもの」から「独立したJavaScript」へ立場が変わりました。だから、普通のJavaScriptとして書けばいいのです。

原因

WordPressは、& という文字を「HTMLの特殊文字」として扱います。そのため、保存するときに & を & という表記に自動変換してしまうのです。
つまり、

あなたがこう書いたつもりでも——
&& 

実際にページに出力されるのは——
&&

JavaScriptにとっては意味不明な文字列です。ここで処理が止まり、それ以降のコードは一切動きません。

確かめ方

ページ上で右クリック →「ページのソースを表示」。エラーが指す行番号を見てください。そこに & があれば、犯人はこれです。

解決：&& を使わずに書く

書き換えられるのなら、最初から使わなければいい。&& を、入れ子の if に分解します。

// 変更前（動かない）
if (moved < 6 && quick) {
	applyMode(modeIndex + 1);
}

// 変更後（動く）
var isTap = (6 > moved);
if (isTap) {
	if (quick) {
		applyMode(modeIndex + 1);
	}
}

「AかつB」を「Aなら、その中でBなら」に分けただけです。動作は変わりません。