Javascriptを使用してWordpressサイトの画像を変更しようとしています

Question

これは私の最初の質問ですので、私が何か間違っている場合は私に同行してください。

私は、StorefrontテーマとWooCommerceの子テーマを使用してWordPressサイトを実行しています。私の製品の1つでは、赤い点が点滅しているイメージを効果的にgifに変更してテキストをクリックすると、画像のさまざまな部分をハイライト表示する単純なJavaScriptの部分を使用しようとしています。私はWordPressでエディタ内からJavascriptをインラインで行かせることはできないと知ったので、プラグイン（TC Custom Javascript）を最初に試してみたところ、うまくいきませんでした。

私のコードは、Wordpress以外でテストしたときと同じように正しいと思います。また、プラグインとエンキューされたスクリプトファイルは、別のもので動作します（たとえば、ボタンをクリックすると警告が表示されます）。私はちょうどイメージがWordPressの中で変わらない理由を理解できません。次のように

私のHTMLコードは次のとおりです。 -

<img id="theImage" src="https://c-ko.co.uk/wp-content/uploads/2016/09/HP-230_white_1.jpg" width="300" height="300"> 
<input type="button" value="Click" id="button1"> 

私のJavascriptのコードは次のとおりです。 - 私はうまくいけば、私が達成しようとしているかを説明するために、実際の画像のパスが含まれている

var b1 = document.getElementById("button1"); 
b1.onclick = pictureChange; 

function pictureChange() { 
    "use strict"; 
    document.getElementById('theImage').src = "https://c-ko.co.uk/wp-content/uploads/2016/11/flashing_dot.gif"; 
} 

- 私はそれが物事を行うための粗雑な方法かもしれないが、あなたが私のコードから伝えることができると確信しているので、それは進歩的ではないと思います。

私は製品を公開しましたが、誰かがサイトでそれを見る必要がある場合に備えて、私はそれを隠しました。リンクはhttps://c-ko.co.uk/product/dual-channel-infrared-headphones/

です（ただ、明確にするために、あなたは「調節可能なヘッドバンド」ボタンが表示されるまでスクロールダウンする必要があります。）

誰もが与えることができるすべての助けを事前にありがとうございます。

Answer 1

あなたはonloadイベントリスナーにすべてをラップする必要があります。

window.onload=()=>{ 
    button=document.getElementById("button1"); 
    button.onclick=()=>{ 
     //your gif code 
     document.getElementById('theImage').src = "https://c-ko.co.uk/wp-content/uploads/2016/11/flashing_dot.gif"; 
    }; 
    }; 

ドキュメントオブジェクトは、単にウィンドウオブジェクトが完全にロードされた場合、スクリプトはクローム/ Firefoxのデバッガを使用してサイトに埋め込まれている場合...チェックが存在します。コンソールでエラーを探してください...

について（）=> {}： これはいわゆる矢印機能です。