<!DOCTYPE html>
<html>
<head>
<title>겜블링게임</title>
</head>
<body>
<h2>겜블링게임</h2>
<br>
<p>각 숫자를 클릭하면 ....... 승리합니다.</p>
<hr>
<div style="background-color:lightpurple; width:300; height:100">
<span id="first" style="color:blue" onclick="change(this)">0</span>
<span id="second" style="color:blue" onclick="change(this)">0</span>
<span id="third" style="color:blue" onclick="change(this)">0</span>
</div>
<div id="result"></div>
<script>
function change(obj){
var num = Math.floor(Math.random()*3);
obj.innnerHTML = num;
}
function check(){
var a = document.getElementById.innerHTML("first");
var b = document.getElementById.innerHTML("second");
var c = document.getElementById.innerHTML("third");
if(a==b && b==c)
document.getElementById("result").innnerHTML="success(click here to do again)";
else
document.getElementById("result").innerHTML = "fail(click here to do again)";
}
</script>
</body>
</html>
여기까지 했습니다만, 세번째 숫자를 누름과 동시에 "fail(click here to do again)" 또는 "success(click here to do again)"이라는 문구가 나와야하잖아요??
근데 <div>태그안의 세번째 <span>태그의 onclick리스너에는 이미 메소드가 부여되여있는대 fail이나 success를 출력해주는 또 다른 메소드(저는 check로 정의했습니다.)는 어떻게 부여해줄수있나요??
그 후에, <div id="result"></div>에 "fail(click here to do again)" 또는 "success(click here to do again)"이라는 문구가 뜰텐데 해당 문구를 클릭했을때 세숫자를 0으로 초기화해주고 "fail(click here to do again)" 또는 "success(click here to do again)"이라는 문구를 삭제하려면 어떻게 해야하나요???
동영상으로 만들어 보았으니
참고하세요.
<div id="result">에 onclick을 달아서 0 0 0을 지우면 되고,
onclick에서 이 객체의 innerHTML은 ""로 주어 버리면 안보이게 되겠지요.
또 다르게 style 속성에 invisible을 주어 보이지 않게 하는 방법이 있습니다. 스스로 찾아보도록 하세요.