既存のjavascript要素を別のものに置き換えます

Question

私ができること： ユーザーが名前をクリックすると画像が表示されます。ユーザーがクリックすると画像が表示されます表示されます。私ができないことは何

：別の名前をユーザーがクリックする、既存のイメージとクリックの数が最近のために交換する必要があります は1をクリックしました。あなたはこれを達成するために私を助けることができますか？

var myArray = []; 
myArray[0]= {name: "Mel", img : "img/ml.jpg", clicks : 0}; 
myArray[1]= {name: "Ang", img : "img/ma.jpg", clicks : 0}; 
myArray[2]= {name: "Cam", img : "img/mk.jpg", clicks : 0}; 
myArray[3]= {name: "Val", img : "img/vs.jpg", clicks : 0}; 
myArray[4]= {name: "Gab", img : "img/ga.jpg", clicks : 0}; 

let elemName=[]; 
let elemImg=[]; 
let elemClick=[]; 

for (let i = 0; i < myArray.length; i++) {  //create elements 
    elemName[i] = document.createElement("h2"); 
    elemName[i].textContent = myArray[i].name; 
    elemImg[i] = document.createElement("img"); 
    elemImg[i].src = myArray[i].img; 
    elemClick[i] = document.createElement("h3"); 
    elemClick[i].textContent = myArray[i].clicks; 

elemImg[i].onclick=function(){     //count clicks 
    myArray[i].clicks++; 
    elemClick[i].textContent = myArray[i].clicks; 
}; 

document.body.appendChild(elemName[i]); //Show names 

elemName[i].onclick=function(){  //When a name is clicked, display image and number of clicks, replacing the existing one 

    //???????????????? 

    document.body.appendChild(elemImg[i]); 
    document.body.appendChild(elemClick[i]); 
}; 

Answer 1

• 名がクリックされると、ディスプレイ使用、
• を開始するdisplay: none持つすべてのイメージを作成します。すべての画像のどれも、次に表示：ブロックを。または表示：インライン;表示する画像に
• DIVを作成し、すべての上に表示するにはCSS zScore : 1を使用してください。この数字をDIVに入れてください。あなたはまた、おそらくCSS position: relativeまたはposition:absoluteが正しい場所