尝试使用Javascript更改Wordpress站点上的图像

这是我在这里的第一个问题，所以如果我做错了什么，请容忍我

我正在运行一个wordpress网站，使用店面主题和WooCommerce的子主题。在我的一个产品上，我尝试使用一个简单的javascript，当点击一段文本时，它会通过有效地将图像更改为带有闪烁红点的gif来突出显示图片的不同区域。我了解到wordpress不允许我在编辑器中使用内联Javascript，因此我首先尝试了一个插件（TC定制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">

我已经包括了实际的图片路径，希望能够解释我试图实现的目标-我知道这可能是一种粗糙的做事方式，但我相信你可以从我的代码中看出，我没有那么先进，这将是好的，只要它能工作

我已经发布了该产品，但将其隐藏起来，以防有人需要在网站上看到它。链接是

（为了清楚起见，您需要向下滚动，直到看到“可调节头带”按钮。）

---

提前感谢您提供的任何帮助。

您需要将所有内容打包到一个已加载的侦听器中：

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";
    };
   };

如果窗口对象已完全加载，则文档对象仅存在。。。使用chrome/firefox调试器检查脚本是否嵌入到您的站点中。在控制台中查找错误

关于（）=>{}： 这就是所谓的箭头函数。它的语法比普通函数短得多：

var name=(arguments)=>{code};

---

谢谢你的帮助，乔纳斯，目前我还没有感到高兴，但我认为有什么东西阻止了脚本的运行-可能与主题有关。我仍在与之斗争…嗯，调试更新：-我发现我的脚本在某些浏览器中工作，但在其他浏览器中不工作！它可以在我的Mac上的Firefox中使用，但不能在Chrome、Safari或Opera中使用。它可以在我的Android浏览器上运行，但不能在Chrome上运行。在我同事的windows机器上，它在IE和他的Chrome版本中工作！在图像更改之前，我在脚本中编写了一个警报，只是为了检查按钮是否正常工作，警报是否对所有内容都有效——实际上，只是图像更改在某些浏览器上不起作用。我在控制台中没有收到任何错误。不知道下一步该怎么办？

var name=(arguments)=>{code};