ワードプレスの記事に書いたJavaScriptが動かない。まずは試すべき事。

SNSやってます。

このボタンを押すと下のJavaScriptという文字が赤くなります。

JavaScript

押していただいた方には確認いただけたと思いますが、「JavaScript」が赤くなったはずです。

こんにちはSPF36.comのダイ(@daijirok_jp)です。

上のJavaScriptは、私が初めてブログに載せたJavaScriptになります。

このコードは初心者向けプログラミング学習サイト「Dotinstall」にある無料レッスンJavaScript入門 (全24回)の第23回と24回を参考に作ったものです。

ただ初めて作った後、ワードプレスのこのブログに載せようとすると、なぜかATOMで書いてクロームで動かした時は作動したプログラムが動かなくなりました。

色々調べるとJavaScriptは空白行を入れずかつ<script></script>を<div></div>で囲みワードプレスのテキストエディタに記載すれば良いと分かりました。

下記がこのJavaScriptの実際のコードです。

テーマのせい上記方法を用いてもJavaScriptが動かないなどという事もないとは言い切れませんので、まずは下記のコードを入れてちゃんと動作するか試してみてはどうかと思います。

お試し用コード

まず下記2行をワードプレスの記事作成用のテキストエディタに貼り付けます。ビジュアルエディタに貼ってはいけません。

また、場所はどこでも構いません。

<button id="dai_btn">ボタン</button>
<p id="dai_JavaScript">JavaScript</p>

次に下記のJavaScriptのコードを記事作成用のテキストエディタの一番下に貼り付けます。

<Script>タグに囲まれているので実際には本文には表示されませんが、ビジュアルエディタでみると動画再生のようなボタンが本文の一番下に表示されます。

<div><script>
document.getElementById('dai_btn').addEventListener('click', function() {
var change_saikou = document.getElementById('dai_JavaScript');
change_saikou.style.color = 'red';
});
</script></div>

これで、準備完了です。

ワードプレスのエディタ画面でプレビューを押してみましょう。

プレビュー画面できちんと動作しますので、ボタンを押してきちんとJavaScriptの文字が赤色になった場合は、御使いのワードプレス環境でもJavaScriptを記事内に記載する事ができると分かります。

せっかく勉強したJavaScript、ブログで公開したいですよね>_<

ハマってしまった方はぜひ試してみてください。

参考になったサイト

Web関係の話題を中心に、心惹かれるモノコトをなんでも綴ります。中の人の日々の記録帳として読書の感想や趣味の話しなど少々雑多な内容となっています