메뉴 건너뛰기

조회 수 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 16: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.20 18330
323 form 태그와 웹서버 1 tc0712 2021.09.29 103
322 비정형 표 만들기 다운로드 1 애치 2023.04.04 103
321 520페이지 에 쿠키쓰기 질문 1 os 2017.12.09 104
320 책을 종이책으로 구매했는데 1 ddd 2024.03.21 106
319 9장 실습9번 문제 2 열심히 공부하는 독자 2020.08.23 106
318 list type 질문이요 2 file 021 2020.05.03 107
317 document.getElementBy~ 2 tc0712 2021.11.22 108
316 표와 div span 4 키보드 향기 2020.04.05 109
315 css3로 웹 페이지 꾸미기 3 file ㅇㅇ 2020.04.30 109
314 5장 실습문제 10번 1 쿠웨이트 2022.04.12 109
313 6단원 실습문제 관련 질문합니다. 1 질문 2020.06.06 110
312 4장 예제 17번 1 신입 2018.04.19 111
311 open12 질문드립니다. 3 열심히 공부하는 독자 2020.09.08 111
310 이미지파일 6 스물다섯 2022.04.08 111
309 13장 실습문제 5번 질문입니다. 3 웹린 2022.12.04 111
308 예제 4-14 질문이욤 2 file 코딩딩 2020.05.17 113
307 명품 수정판 HTML5+ CSS3+ Javascript 웹 프로그래밍 p.74 메타 데이터 <meta> 문의 1 mikael 2021.05.06 113
306 혹시 예전 서적인 "DHTML + 자바스크립트 프로그래밍"의 예제를 받을 수 있는 방법은 없는지요? 2 비만타쿠미 2018.09.26 116
305 한글 타이틀이 깨져 보입니다. 1 안스가리오 2020.01.06 116
304 5장 5-(2) 질문 있습니다! 1 2021.10.14 117
목록
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로