메뉴 건너뛰기

<!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을 주어 보이지 않게 하는 방법이 있습니다.  스스로 찾아보도록 하세요.

  • ?
    1234 2019.08.16 17:03
    친절한 설명과 답변 정말 감사드립니다. 알려주신 내용을 토대로 제가 작성한 코드입니다. 이 책을 공부하는 다른 학우들에게도 도움이 되면 좋겠습니다.

    ================================================================================================================


    <!DOCTYPE html>
    <html>

    <head>

    <title>겜블링게임</title>

    </head>

    <body>

    <h2>겜블링게임</h2>

    <br>

    <p>각 숫자를 클릭하면 ....... 승리합니다.</p>

    <hr>

    <div width:300; height:100">
    <span id="first" style="color:blue; font-size:30px" onclick="change(this)">0</span>
    <span id="second" style="color:blue; font-size:30px" onclick="change(this)">0</span>
    <span id="third" style="color:blue; font-size:30px" onclick="change(this)">0</span>
    </div>

    <div id="result" onclick="reset()"></div>

    <script>
    function change(obj){
    var num = Math.floor(Math.random()*3);
    obj.innerHTML = num;
    if(obj==document.getElementById("third"))
    check();
    }

    function check(){
    var a = document.getElementById("first").innerHTML;
    var b = document.getElementById("second").innerHTML;
    var c = document.getElementById("third").innerHTML;
    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)";
    }

    function reset(){
    document.getElementById("first").innerHTML=0;
    document.getElementById("second").innerHTML=0;
    document.getElementById("third").innerHTML=0;
    document.getElementById("result").innerHTML="";
    }

    </script>



    </body>

    </html>

QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 18175
282 답안이 없는 책이라니 ;;; 2 이준석 2018.11.01 406
281 7장 실습문제 8번에서 질문입니다 1 JAVAscript공부중이에요 2020.05.27 403
280 2장 예제 2-11과 관련하여 질문 드립니다. 1 조근석 2017.04.30 389
279 r/w는 무슨 뜻인가요? 1 ㅇㅁㅇㅈ 2021.12.22 386
278 오픈챌린지 4장 질문 1 littlelion 2018.04.18 385
277 8장 실습문제 2번 (2),(3) 어떻게해야하나여? 5 187104343 2018.11.08 380
276 9장 3번 질문 있습니다. 2 jonjsin 2017.11.23 380
275 10장 window.open 질문입니다. 1 멍청이 2019.08.23 376
274 8장 실습문제8번 질문있습니다. 1 빼빼로 2018.11.15 372
273 open challenge10 관련 질문드립니다 1 궁금해용 2018.05.16 368
272 5장 실습문제 4-2질문 2 어어엉 2017.11.12 366
271 9장 예제 9-10질문입니다. 2 file 삼오칠 2021.05.14 365
270 실습문제 짝수번 이미지들은 다운할 수 없나요? 공부하면성공한다 2018.10.02 365
» 377page 8장 오픈챌린지 질문입니다.(다시 질문 올립니다.) 2 멍청이 2019.08.15 359
268 예제 5-3 220page 2 호기심 2020.04.17 355
267 9장 실습문제 10번 계산기 만들기 2 호탱 2020.11.29 351
266 html에 css작성할때 2 궁금이 2020.03.04 351
265 7장 오픈챌린지 1 질문이요 2018.12.18 342
264 7장 6번문제 질문있습니다. 2 초심자 2018.09.26 340
263 오랜만에 찾아 뵙습니다.. 3 은성 2017.05.10 338
목록
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 11 ... 21 Next
/ 21
위로