試圖使用Javascript更改Wordpress網站上的圖像

這是我在這裏的第一個問題，所以如果我做錯了什麼，請耐心等待。試圖使用Javascript更改Wordpress網站上的圖像

我正在運行一個使用店面主題和WooCommerce的兒童主題的WordPress網站。在我的一款產品中，我嘗試使用一段簡單的JavaScript代碼，通過有效地將圖像更改爲帶有閃爍紅點的GIF圖像，可以突出顯示圖片的不同區域。我瞭解到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/

（只是要清楚，你需要直到看到「可調節頭帶」按鈕向下滾動。）

預先感謝您的任何幫助任何人都可以給。

來源

2016-11-04 Bodge1512

你需要的一切包裝成一個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"; 
    }; 
    };

文檔對象只存在，如果窗口對象已完全加載中...檢查腳本被嵌入到使用Chrome/Firefox的調試你的網站。在控制檯中查找錯誤...

關於（）=> {}：這就是所謂的箭頭函數。它具有比普通函數的語法要短得多：

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

來源

2016-11-04 18:07:41

謝謝你的幫助喬納斯，此刻我仍然沒有喜悅，但我認爲有些事情是從運行停止腳本 - 或許真的做的主題。我仍然在與它作鬥爭...... – Bodge1512

那麼，調試調試調試 –

更新： - 我發現我的腳本是在一些瀏覽器，但不是其他人！它適用於我的Mac上的Firefox，但不適用於Chrome，Safari或Opera。它適用於我的Android瀏覽器，但不適用於Chrome。在我的同事Windows機器上，它在IE和他的Chrome版本中起作用！在圖像更改之前，我已經在腳本中編寫了警報，以檢查該按鈕是否正常工作，並且警報對所有內容都起作用 - 這實際上只是在某些瀏覽器上無法使用的圖片更改。我在控制檯中沒有收到任何錯誤。不知道下一步該怎麼做？ – Bodge1512

試圖使用Javascript更改Wordpress網站上的圖像

回答

相關問題