<!DOCTYPE HTML>
<html>
<head>
<title>
겜블링 게임
</title>
<style>
div{
display:inline-block;
background:pink;
width:200px;
height:100px;
font-size:70px;
}
</style>
</head>
<body>
<script>
function change(){
var d = document.getElementById("Gamble");
var num = d.innerHTML;
var numN,numF=0;
numN = Math.random()*10 % 3;
var numF=Math.floor(numN);
d.innerHTML = numF;
}
function change1(){
var d = document.getElementById("Gamble1");
var num = d.innerHTML;
var numN,numF=0;
numN = Math.random()*10 % 3;
var numF=Math.floor(numN);
d.innerHTML = numF;
}
function change2(){
var d = document.getElementById("Gamble2");
var num = d.innerHTML;
var numN,numF=0;
numN = Math.random()*10 % 3;
var numF=Math.floor(numN);
d.innerHTML = numF;
}
</script>
<h3>겜블링 게임</h3>
각 숫자를 클릭하면 0에서 2사이의 난수로 바뀝니다. 모두 같은 수가 나오면 승리합니다.
<hr>
<div>
<span style="color:blue"id="Gamble" onclick="change()">0</span>
<span style="color:blue"id="Gamble1" onclick="change1()">0</span>
<span style="color:blue"id="Gamble2" onclick="change2()">0</span>
</div>
</body>
</html>
위와 같이 함수 세개를 따로 설정한뒤에 각각 0~2까지 숫자는 나옵니다. 하지만 이후 성공여부를 표시 하는것이 막혔는데요.
다른 QnA를 봤었는데.
function returnGAME(){
document.getElementById("result").innerHTML = "success";
}
<div id="result" onclick="returnGAME">
위 두코드를 활용하면 해결 될것 같기도한데 아이디어가 생각나지 않습니다. 어떻게하면 화면에 출력할수 있을까요??...
질문자가 언급한 것처럼 아래 태그가 필요합니다.
<div id="result" onclick="returnGAME">
(이 태그에서 "returnGAME" 은 잘못된 문장입니다. 함수를 호출하려면 "returnGAME()"로 해야 하는데......)
하지만, 이 태그에 출력하는 것은 <span onclick="change()"> 태그를 클릭할 때 실행되는 change() 함수인 것 같습니다.
이 함수는 다른 2개의 숫자와 같은지 확인하고 같으면 그때 다음 코드를 실행하면 되지요.
document.getElementById("result").innerHTML = "success";
2. 그리고 나서, 다음 <div> 태그는 클릭하면 "success" 를 보이지 않게 해야 합니다.
<div id="result" onclick="returnGAME"></div>
보이지 않게 하는 방법은 여러가지가 있는데 본인이 할 수 있는 방법으로 하세요. 예를 들어 다음과 같이 하면
<div id="result" onclick="this.innerHTML=''"></div>
현재 이 객체(<div> 태그)에 출력된 "success"가 빈 문자열로 채워져서 보이지 않게 됩니다.