안녕하세요 저자님.
열심히 공부하다가 또 왔습니다.
open8 문제를 해결하는 과정에서 몇가지 질문드립니다.
https://ancandy.github.io/web1/open8.html(정상)
https://ancandy.github.io/web1/open8-error.html(오류)
Q1. 저는 checker라는 함수를 통해 게임의 결과를 판단하였습니다.
그런데, 위에 오류링크 checker함수 if문 조건을 아래와 같이 하니 숫자가 달라도
성공하는 오류가 발생하였습니다. 아무리 생각을 해보아도 오류의 원인을 모르겠습니다..ㅠ
function checker(){
if(spans[0].innerHTML == spans[1].innerHTML == spans[2].innerHTML)
}
Q2. 3번째 숫자를 누르면 게임의 결과가 나타나게 됩니다.
그런데, 다시 숫자를 누르면 숫자가 바뀌는 문제점이 있었습니다.
그래서 재도전문장만 클릭가능하게 하고싶었습니다.
정상링크에서 randNum 함수가 이를 감지하여 alert와 return문으로 문제점을 해결했습니다.
하지만, 문제를 해결하기위해 억지로 한거같아서 맘에 들지 않습니다.
혹시 좀더 나은방법이 있는지 궁금합니다.
1. 다음 문장에서 if문은 매우 잘못된 문장입니다.
3개의 값을 비교하기 위해서는 이런 식의 문은 잘못된 표현입니다.
if(spans[0].innerHTML == spans[1].innerHTML == spans[2].innerHTML)
}
보세요.
이 if 문의 조건이 실행되는 과정은 다음과 같습니다.
먼저 spans[0].innerHTML == spans[1].innerHTML 를 검사합니다. 그래서 참이라고 합시다. 그러면 if문은 다음과 같이 됩니다.
if(true == spans[2].innerHTML)
이상하죠, 그런데 true는 1로 번역되고, 때마침 spans[2].innerHTML이 1이면
이 if문이 참이되죠.
혹은
spans[0].innerHTML == spans[1].innerHTML이 서로 달라 거짓이라고 하면 false, 즉 0이되고
if(0 == spans[2].innerHTML) 이 비교되는데 때마침 spans[2].innerHTML이 이면
이 if문이 참이되겠죠.
2. selectable 이라는 전역변수를 추가하여 수정해보았는데, 소스 분석해보세요.
<script>
var selectable = true;
function randNum(obj){
if(selectable == false)
return;
/*ar p = document.getElementById("result");
if(p.innerHTML!=""){
return;
}*/
var n = Math.floor(Math.random()*3);
obj.innerHTML=n;
if(obj.id == "last") {
checker();
selectable = false;
}
}
function checker(){
var spans = document.getElementsByTagName("span");
var p = document.getElementById("result");
if(spans[0].innerHTML == spans[1].innerHTML && spans[0].innerHTML== spans[2].innerHTML){
p.innerHTML="Success(click here to do again)";
}
else
p.innerHTML="fail(click here to do again)";
}
function retry(){
var spans = document.getElementsByTagName("span");
var p = document.getElementById("result");
for(var i=0; i<spans.length;i++)
spans[i].innerHTML=0;
p.innerHTML="";
selectable = true;
}
</script>