메뉴 건너뛰기

조회 수 1150 댓글 1

<!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">

위 두코드를 활용하면 해결 될것 같기도한데 아이디어가 생각나지 않습니다. 어떻게하면 화면에 출력할수 있을까요??...

?
  • ?
    관리자 2018.05.18 17:44
    1. 성공 여부를 표시하기 위해서는 "success"라는 글자가 출력될 공간이 먼저 확보되어야 합니다.
    질문자가 언급한 것처럼 아래 태그가 필요합니다.
    <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"가 빈 문자열로 채워져서 보이지 않게 됩니다.

QnA

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

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 18175
322 버튼 태그에 대해서 궁금한게 있습니다!! 1 아이디가뭐였지 2021.03.22 128
321 2장 이론문제 3번 1 알고싶어요 2021.03.14 1328
320 14장 예제 사라진 건가요 1 ... 2021.03.09 4077
319 ch1 이론문제 1번 2 새내기 2021.03.06 217
318 연습문제 짝수답은어디있나요?? 2021.02.16 825
317 9장 실습문제 10번 2 왜죠 ㅠㅠ 2021.01.24 1203
316 명품 html5+ 수정판 css3+ javascript 웹 프로그래밍 실습문제 이미지 파일 어디서 다운 받아요? 1 미카엘 2021.01.14 728
315 p.296 isNaN 함수 1 yamto 2020.12.28 179
314 실습문제 6장 6-(1) 어떻게 하는 건가요? 1 초보자 2020.12.23 215
313 실습문제 7장 5번 1 유등등 2020.12.17 692
312 13-5 하고 13-6 error 1 WebWeb 2020.12.09 148
311 7장 1번 1 2020.11.30 311
310 9장 실습문제 10번 계산기 만들기 2 호탱 2020.11.29 350
309 6장 오픈챌린지 질문 1 giggle 2020.11.23 275
308 Page 396 script 위치 관련 질문 드립니다 2 질문드립니다 2020.11.05 154
307 실습 8장 8번 문제 질문이요! 1 2020.11.03 247
306 chapter5 오픈챌린지 5장 아예 모르겠어요.. 열심히해보자 2020.11.03 292
305 안녕하세요? 186쪽 예제 4-13 대해서 물어봅니다. 1 file 김현우 2020.11.02 125
304 5-3 220page 1 고수가되고싶어요 2020.10.24 141
303 7장 실습문제 10번 좀 도와주세요 ㅜㅠ 헷찡 2020.10.18 233
목록
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로