Javascript를 사용하여 다른 이미지를 클릭하면 여러 임의 이미지가 어떻게 나타나게 할 수 있습니까?

현재 이미지를 클릭하면 사라지고 3 개의 임의의 이미지가 표시됩니다. 지금까지 클릭 가능한 이미지를 두 번 복제하고 보이지 않게 만드는 것이 효과적 일 것이라고 생각하여 임의의 이미지로 변경하여 이미지를 클릭 한 후 표시되도록했습니다. 이것이 어떻게 작동하는지 다른 생각이 있다면, 나는 정말로 알고 싶습니다!Javascript를 사용하여 다른 이미지를 클릭하면 여러 임의 이미지가 어떻게 나타나게 할 수 있습니까?

또한 누구나 이미지를 만들어서 3 개의 스팟 중 하나에서만 사용할 수 있으므로, 서로 옆에 3 개의 임의의 이미지가 항상 있도록 할 수 있습니다.

여기 내 JS 및 HTML :

var playerImg; 
 
var playerImg2; 
 
var playerImg3; 
 
var playerArray = ["A1.png", "A2.png", "A3.png", "A4.png", "A5.png", "M1.png", "M2.png", "M3.png", "M4.png", "M5.png", "V1.png", "V2.png", "V3.png", "V4.png", "V5.png", "D1.png", "D2.png", "D3.png"]; 
 

 
function openPack() { 
 
    var randomPlayer = (Math.floor(Math.random() * 18) + 1); 
 
    playerImg = playerArray[randomPlayer - 1]; 
 
    document.getElementById("pack").src = "image/" + playerImg; 
 

 
    var randomPlayer2 = (Math.floor(Math.random() * 18) + 1); 
 
    playerImg2 = playerArray[randomPlayer2 - 1]; 
 
    document.getElementById("player2").src = "image/" + playerImg2; 
 

 
    var randomPlayer3 = (Math.floor(Math.random() * 18) + 1); 
 
    playerImg3 = playerArray[randomPlayer3 - 1]; 
 
    document.getElementById("player3").src = "image/" + playerImg3; 
 
} 
 

 
document.querySelectorAll("img#player2")[0].addEventListener("click", openPack);

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href="css/style.css"> 
 
</head> 
 

 
<body> 
 
    <img id="pack" src="image/pack.png" alt="Unopened pack"> 
 
    <img id="player2" src="image/pack.png" alt="Place for a second player after the pack is opened"> 
 
    <img id="player3" src="image/pack.png" alt="Place for a third player after the pack is opened"> 
 
    <img id="veld" src="image/veld.png" alt="Football field with positions"> 
 

 

 

 
</body> 
 
<script src="scripts/packs.js"></script> 
 

 
</html>

내가 뭔가를 말할 잊어 버린 경우 알려주세요, 감사합니다! 여기

출처

2017-04-10 Donsco

새로운 자세한 내용

에 대한 중복

function openPack() { 
    var playerArraycopy = playerArray.slice();//getting new copy of initial input 
    function getRandomImg(){ 
     return playerArraycopy.splice([Math.floor(Math.random() * playerArraycopy.length)],1)[0];//calculating a new random image and removing it from copy to exclude duplicates 
    } 

    document.getElementById("player2").src = "image/" + getRandomImg(); 
    document.getElementById("pack").src = "image/" + getRandomImg(); 
    document.getElementById("player3").src = "image/" + getRandomImg(); 
}

에게 확인 Array.splice 제외됩니다 openPack 기능

출처

2017-04-10 17:48:09

Javascript를 사용하여 다른 이미지를 클릭하면 여러 임의 이미지가 어떻게 나타나게 할 수 있습니까?

답변

관련 문제