WordPressでonclickが効かない

ちょっとはまったので、メモしておきます。

HTMLにて、ある要素に”start”というIDをつけて用意しておき、その要素をクリックしたとき、非表示であった別の要素が表示されるようにJavaScriptを記述したいとします。その別の要素には”area”というIDをつけるものとします。
そして、表示した”area”を閉じるため用の要素を”close”というIDで用意しておきます。

コードで表すと以下のような感じ。
HTML

<button id=”start”>スタート</button>
<div id=”area”>
<img src=”close.gif” alt=”” id=”close”>とじる</img>
<p>ここが表示したいエリア</p>
</div>

CSS

#area {
display: none;
cursor: pointer;
}

JavaScript

const start = document.getElementById(‘start’);
const close = document.getElementById(‘close’);
const area = document.getElementById(‘erea’);

start.onclick = (() => {
area.setAttribute(“style”, “display: block”);
start.setAttribute(“style”, “display: none”);
});

close.onclick = (() => {
area.setAttribute(“style”, “display: none”);
start.setAttribute(“style”, “display: block”);
});

これをプラグインにすると、次のようになるかな。

onclick-plugin.php

<?php
/*
* @wordpress-plugin
* Plugin Name: Onclick Plugin
* Description: Test of ‘onclick’. Short Code is “insert_onclick”.
* Version: 1.0
* Author: Billies Works
*/

function add_files() {
wp_enqueue_script(‘onclick_js’, plugins_url(‘onclick.js’, __FILE__), array(), ‘1.0’, true);
wp_enqueue_style(‘css_onclick’, plugins_url(‘onclick.css’, __FILE__));
}
add_action(‘wp_enqueue_scripts’, ‘add_files’);

function go_test() {
ob_start();
?>
<section>
<button id=”start”>スタート</button>
<div id=”area”>
<img id=”close” src=”<?php echo plugins_url(‘close.gif’, __FILE__); ?>” alt=””>
<p>ここが表示したいエリア</p>
</div>
</section>
<?php
return ob_get_clean();
}
add_shortcode(‘insert_onclick’, ‘go_test’);

onclick.css

#area {
display: none;
cursor: pointer;
}

onclick.js

‘use strict’;

const start = document.getElementById(‘start’);
const close = document.getElementById(‘close’);
const area = document.getElementById(‘area’);

start.onclick = (() => {
area.setAttribute(“style”, “display: block”);
start.setAttribute(“style”, “display: none”);
});

close.onclick = (() => {
area.setAttribute(“style”, “display: none”);
start.setAttribute(“style”, “display: block”);
});

ここで不思議なのですが、
ローカル環境の”Docker”上のWordPressだと期待通りに動くのですが、

レンタルサーバ上のWordPressにアップロードすると、onclickが効いてくれないのです。

上のコードを実際に有効化したのがこれ。

ここが表示したいエリア

 画像は表示されるけれど、クリックしても、動いてくれません。でも、ローカル環境だと動いてくれます。

んでもって、ものはためしと、<img>要素を<button>要素に変更すると、動いてくれるのです。

<img id=”close” src=”<?php echo plugins_url(‘close.gif’, __FILE__); ?>” alt=””>

これを、 これに変更。

<button id=”close”>とじる</button>

これだと、ちゃんと動きます。

さらにまた、これでも動きます。

<div id=”close”>とじる</button>

さらにさらに、これでもOK。

<div id=”close”><img src=”<?php echo plugins_url(‘close.gif’, __FILE__); ?>” alt=””></div>

ということは、インライン・タイプだとだめで、ブロック・タイプだといいってことですかね?

それにしても、ローカル環境だとOKで、レンタルサーバ上だとだめというのが、不思議。

サーバーのPHPは7.1です。
WordPress 4.9.8。

ローカル環境は、Ubuntu 18.04。
Docker version 18.06.0-ce。
Dockerのコンテナ Apache/2.4.25。PHP7.2.6。