<!DOCTYPE html>
<html>
<head>
<title>p373OpenChallenge08</title>
</head>
<style type="text/css">
div.color{
display: inline-block;
background: mistyrose;
border: 2px solid pink;
width: 200px;
height: 100px;
font-size: 70px;
}
div.color span{
color :blue;
margin-left: 8px;
}
div#result{
font:20px bold;
color:violet;
}
</style>
<script type="text/javascript">
var a,b,c;
function change_1(obj){
var num=Math.floor(Math.random()*3+0);
obj.innerHTML=num;
a=num;
}
function change_2(obj){
var num=Math.floor(Math.random()*3+0);
obj.innerHTML=num;
b=num;
}
function change_3(obj){
var num=Math.floor(Math.random()*3+0);
obj.innerHTML=num;
c=num;
return gameResult();
}
function gameResult(){
if(a==b && b==c && a==c)
document.getElementById("result").innerHTML="Success(click here to again)";
else
document.getElementById("result").innerHTML="fail(click here to again)";
}
function reStart(){
/*여기에 뭐가 들어가야 게임이 다시 시작 될까요....*/
}
</script>
<body>
<div class="color">
<span onclick="change_1(this)">0</span>
<span onclick="change_2(this)">0</span>
<span onclick="change_3(this)">0</span>
</div>
<div id="result" onclick="reStart()"></div>
</body>
</html>
-----------------------------------------------------------------------------------------------
안녕하세요 관리자님 제가 이런식으로 숫자를 비교해서 결과를 출력하는 방법이 맞는 방법인가요???
그리고 다시 시작 하는 방법을 모르겠습니다. 혼자 고민을 많이 하다가 생각히 도저히 나질 않아 질문드립니다 ...... :(
function reStart(){
3개의 <span> 태그에 각각 다른 id 속성을 두고 3 개의 <span> 태그를 찾고 그 객체의 innerHTML 값을 0으로 하면 됩니다.
아니면 책367(수정판)이나 예제 8-6에 나오는 getElementsByTagName()을 이용하여
모든 span 객체들을 찾아서 이들의 innerHTML 값을 모두 0으로 초기화하면 됩니다.
그리고나서 id가 result인 div 객체의 innerHTML을 ""로 설정하여 보이지 않게 하면 됩니다.
}
이런 방식으로 코드를 작성해보세요.
제가 해보니 잘 됩니다.
사실, 변수 a,b,c에도 문제가 있는데, 일단 해보세요.