多圖像交換

Question

我有一個問題，我試圖編碼出來。我對JavaScript非常陌生，對我一無所知。我有10個空黑色方塊圖像。在它們下面，我有10個黑色方框標記爲0-9。我的目標是讓用戶點擊一個已編號的方塊，然後選擇他想放置的空白方塊。

用戶必須能夠對每個編號的方塊做到這一點。 （我有一個數學問題，我希望用戶通過單擊圖像來解決問題，並將它們放在需要解決方程的地方）。我的思路是通過使用getElementId獲取單擊的圖像並將其存儲到一個變量中，並繼續這個過程。

我不確定這是否可能。我的想法是「點擊圖片，識別點擊的內容，將其存儲在一個臨時變量持有者中，並與點擊的第二個（空白）圖像交換）我希望這是有道理的，我希望有人能爲我闡明這一點。感謝所有幫助和很享受學習過程

我的HTML：

這些都是空白影像0-9：

<img src="blank.jpg" id="blank0" onclick="swap()" width="30" height="30"> </button> 
<img src="blank.jpg" id="blank1" onclick="swap()" width="30" height="30"> </button> 

等等，等等

這些都是編號的圖像：

<img src="0.jpg" id="0" onclick="" width="30" height="30"> </button> 
<img src="1.jpg" id="1" onclick="" width="30" height="30"> </button> 

等

Answer 1

嘗試是這樣的：

（所有JS的頂部）：

var holder = ''; 
var holderId = ''; 

然後將其添加到編號的圖像：

<img src="0.jpg" id="number0" onclick="setHolder(this.src,this.id)" width="30" height="30"> 

而且這到空白：

<img src="blank.jpg" id="blank0" onclick="swapHolder(this)" width="30" height="30"> 

然後創建兩個函數是這樣的：

function setHolder(src,id) { 
    holder = src; 
    holderId = id; 
} 

function swapHolder(img) { 
    img.src = holder; 
    document.getElementById(holderId).src = 'blank.jpg'; 
    holder = ''; 
    holderId = ''; 
}