HTML Javascript - 숫자에 따라 이미지를 변경하는 방법

학교용 과제물로 주사위 게임을 만들고 있는데 도움이 필요합니다. 그래서 나는 숫자에 따라 자바 스크립트로 1 또는 2 포인트 주사위로 이미지를 변경하고 싶습니다. Math.random에서 돌아 오는 사람은 여기 어떻게 내 코드인지 알고 있습니다. 당신은 이미지 소스를 통해 그것을 할 수HTML Javascript - 숫자에 따라 이미지를 변경하는 방법

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>dice</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 

    <div id="die1" class="dice"><img src="dice0.png"></div> 

    <div id="die2" class="dice"><img src="dice0.png"></div> 

    <button onclick="rollDice()">Roll Dice</button> 

    <h2 id="status" style="clear:left;"></h2> 

    <script> 

    function rollDice() { 
     var die1 = document.getElementById("die1"); 
     var die2 = document.getElementById("die2"); 
     var status = document.getElementById("status"); 
     var d1 = Math.floor(Math.random() * 6) + 1; 
     var d2 = Math.floor(Math.random() * 6) + 1; 
     var diceTotal = d1 + d2; 
     die1.innerHTML = d1; 
     die2.innerHTML = d2; 
     status.innerHTML = "You rolled " + diceTotal+"."; 
     if(d1 == d2) { 
      status.innerHTML += "Doubles! You get a free turn!!"; 
     } else if (d1 === 3) { 
      status.innerHTML += "half life 3 confirmed"; 
     } else if (d2 === 3) { 
      status.innerHTML += "Half Life 3 confirmed"; 
     } else if (d1 === 1) { 

     } 

    } 

    </script> 

</body> 
</html>

출처

2014-12-11 Knack Kwenie

'die1.querySelector ('IMG') SRC;. ' – adeneo

... = 'someother.img'

function rollDice() { 
 
     var die1 = document.getElementById("die1"); 
 
     var die2 = document.getElementById("die2"); 
 
     var status = document.getElementById("status"); 
 
     var d1 = Math.floor(Math.random() * 6) + 1; 
 
     var d2 = Math.floor(Math.random() * 6) + 1; 
 
     var diceTotal = d1 + d2; 
 
     
 
     document.getElementById("die1Img").src = "dice"+die1+".png"; 
 
     
 
     document.getElementById("die2Img").src = "dice"+die2+".png"; 
 
     status.innerHTML = "You rolled " + diceTotal+"."; 
 
     if(d1 == d2) { 
 
      status.innerHTML += "Doubles! You get a free turn!!"; 
 
     } else if (d1 === 3) { 
 
      status.innerHTML += "half life 3 confirmed"; 
 
     } else if (d2 === 3) { 
 
      status.innerHTML += "Half Life 3 confirmed"; 
 
     } else if (d1 === 1) { 
 

 
     } 
 

 
    }

<div id="die1" class="dice"><img id="die1Img" src="dice0.png"></img></div> 
 

 
    <div id="die2" class="dice"><img id="die2Img" src="dice0.png"></img></div> 
 

 
    <button onclick="rollDice()">Roll Dice</button> 
 

 
    <h2 id="status" style="clear:left;"></h2>

출처

2014-12-11 12:34:38

HTML Javascript - 숫자에 따라 이미지를 변경하는 방법

답변

관련 문제