메뉴 건너뛰기

Home
2018.10.21 12:50

오픈 첼린지 9장 질문 있습니다.

muuum
조회 수 633 댓글 4

<html>
<head>
  <title>Document</title>
  <style>
    table { border-collapse: collapse;}
    table tr td { border:1px solid red; width:70px; height:70px}
  </style>
  <script>

    function catch(){
      alert("safsf");
    }

  </script>
</head>
<body>
  <h3>마우스 클릭 연습</h3>
  <hr>
<table>
  <tr>
    <td><img src="예제의 미디어 파일들\9장\media/strawberry.png" onclick="catch()" width="70px;" height="70px;"></td>
    <td><img src="" onclick="catch()"></td>

 

2018-10-21 12;47;16.PNG

 

 

이미지태그에 onclick 를 주고 우선 제대로 동작하는지 테스트를 해보고있는데

 

뭐가 잘못됐길래 onclick에 전혀 반응을 안하는건가요?

 

script 태그에 alert 이나 document.wirte 나 innerHTML 로 넣어봐도 다 반응이 없네요ㅠ

 

Atachment
첨부 '1'
위로 아래로 댓글로 가기 첨부 수정 삭제
?
에디터 사용하기 닫기
Comments '4'
  • ?
    관리자 2018.10.21 21:35
    catch는 자바스크립트 언어의 키워드 입니다.
    자바스크립트에도 자바나 C++과 같이 예외처리를 위한 다음 구조를 지원합니다.

    try {
    tryStatements
    }
    catch(exception){
    catchStatements
    }
    finally {
    finallyStatements
    }

    함수 이름을 catch 대신 다른 것으로 수정하면 됩니다.
    그리고 오류는 아니지만 HTML5 문서임을 나타내기 위해
    HTML 페이지 첫 줄에 <!doctype html>를 넣도로 하세요.
    수정 삭제 댓글
  • ?
    muuum 2018.10.22 00:07 Files첨부 (2)

    답변 감사합니다. 

    코드를 새로 짜봤는데 이미지를 클릭했을 때 새로운 이미지가 생겨나는 것 까지는 되나

    그 전에 있던 이미지 삭제 하는 방법을 모르겠습니다.

    css 태그 style 에서 width 와 height를 주지 않고 스크립트내에서 집어넣은 이유는

    없는 이미지 상태에서는 깨진 이미지 아이콘이 나와서 지저분해서 입니다.

     

     

    2018-10-22 00;04;13.PNG

     

    <script>
      function start(){
        var ranInt = Math.floor(Math.random()*100)+1;
        var ss = document.images[ranInt]
        ss.src ="예제의 미디어 파일들/9장/media/strawberry.png";
        ss.style.width ="70px";
        ss.style.height = "70px";
      }

      function getcha(){
        var ranInt = Math.floor(Math.random()*100)+1;
        var ss = document.images[ranInt]
        ss.src="예제의 미디어 파일들/9장/media/strawberry.png";
        ss.style.width ="70px";
        ss.style.height = "70px";

      }
      </script>
    </head>
    <body onload="start()">
      <h3>마우스 클릭 연습</h3>
      <hr>
    <table>
      <tr>
        <td><img src="" onclick="getcha()"></td>
        <td><img src="" onclick="getcha()"></td>

    .....

     

     

    2018-10-22 00;02;31.PNG

     

     

    이 문제 때문에 거진 24시간을 헤매고 있네요ㅠㅠ

     

    수정 삭제 댓글
  • ?
    관리자 2018.10.22 09:17

    이 문제는 여러 가지 방법으로 해결할 수 있습니다.
    2가지 방법만 설명합니다.

    1. 이미지의 크기를 주지 마세요. 그리고 클릭된 이전 이미지를 기억해두세요.
    다음과 같이 해보세요.
    var last; // 클릭된 이미지 기억
    function start(){
    var ranInt = Math.floor(Math.random()*100);
    var ss = document.images[ranInt];
    ss.src ="st.png";
    last = ss; // 기억
    }

    function getcha(){
    last.src = ""; // 이전 이미지의 소스 제거
    var ranInt = Math.floor(Math.random()*100);
    var ss = document.images[ranInt];
    ss.src="st.png";
    last = ss; // 현재 이미지가 이전 이미지가 됨
    }

    2. 두번째 방법은 책의 5장 224페이지의 visibility 스타일을 사용하는 방법입니다.(예제 5-7참고)
    var last; // 클릭된 이미지 기억
    function start(){
    var ranInt = Math.floor(Math.random()*100);
    var ss = document.images[ranInt]
    ss.src ="st.png";
    ss.style.width ="70px";
    ss.style.height = "70px";
    last = ss;
    }

    function getcha(){
    last.src = "";
    last.style.visibility = "hidden"; // 이전 이미지를 보이지 않도록 스타일 변경
    var ranInt = Math.floor(Math.random()*100);
    var ss = document.images[ranInt];
    ss.src="st.png";
    ss.style.width ="70px";
    ss.style.height = "70px";
    ss.style.visibility = "visible"; // 현재 이미지를 보이게 설정. 혹시 이 이미지가 이전 이미지 였을 수도 있기 때문
    last = ss; // 현재 이미지는 다시 이전 이미지가 됨
    }

    3. 그리고 소스 코드에서 var ranInt = Math.floor(Math.random()*100) + 1; 에서 1을 제거해야 합니다.
    var ranInt = Math.floor(Math.random()*100);

    4. 24시간을 해맨 것은 나쁜 것이 아닙니다. 그러면서 성장할 것이니 투자라고 생각하세요.

    제가 방법만 알려드렸습니다. 잘 응용해서 완성해 보세요.

    이미지의 경로명이 길어서 st.png로 바꾸었으니 헷갈리지 마세요.

    이상입니다.

    수정 삭제 댓글
  • ?
    muuum 2018.10.22 23:15 Files첨부 (1)

    감사합니다. 알려주신 방법으로 다 해보고 습득했습니다^^

    알려주신 last 처럼 초기화를 시키는 방법을 처음에 시도를 해봤었는데 기초지식이 부족해 잘안되어 많이 헤맸네요ㅠ

    제 나름대로 검색과 질문을 통해 해결한 방법도 올려 보겠습니다.

    이 방법과 알려주신 첫번째 방법으로 했을 때 이미지의 크기가 셀의 크기를 넘어버려서 셀이 망가지게 되던데 이 부분을 해결할 수 있도록

    이미지의 크기를 셀의 크기를 못 넘어가게 강제 시키는 방법은 혹시 없을까요?

    2번째 방법 같은 visibility 같은 경우 출력이 되있는걸 안보이게 하는거라 셀이 천개, 만개 이렇게 될 경우엔 과부하가 걸리진 않는건가요?

     

    <script>
      function start(){
        var ranInt = Math.floor(Math.random()*100);
        var ss = document.images[ranInt]
        ss.src ="예제의 미디어 파일들/9장/media/strawberry.png";
      }

      function getcha(obj){
        var ranInt = Math.floor(Math.random()*100);
        var ss = document.images[ranInt]
        ss.src="예제의 미디어 파일들/9장/media/strawberry.png";
        ss.style.width ="70px";
        ss.style.height = "70px";
        obj.setAttribute("src","");
      }


      </script>
    </head>
    <body onload="start()">
      <h3>마우스 클릭 연습</h3>
      <hr>
    <table>
      <tr>
        <td><img src="" onclick="getcha(this)"></td>
        <td><img src="" onclick="getcha(this)"></td>

     

    2018-10-22 23;11;48.PNG

     

     

    수정 삭제 댓글

QnA

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

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.20 18262
323 2-21 예제 3 file Iwanteating 2021.03.25 157
322 버튼 태그에 대해서 궁금한게 있습니다!! 1 아이디가뭐였지 2021.03.22 128
321 2장 이론문제 3번 1 알고싶어요 2021.03.14 1331
320 14장 예제 사라진 건가요 1 ... 2021.03.09 4077
319 ch1 이론문제 1번 2 새내기 2021.03.06 220
318 연습문제 짝수답은어디있나요?? 묵 2021.02.16 828
317 9장 실습문제 10번 2 왜죠 ㅠㅠ 2021.01.24 1204
316 명품 html5+ 수정판 css3+ javascript 웹 프로그래밍 실습문제 이미지 파일 어디서 다운 받아요? 1 미카엘 2021.01.14 736
315 p.296 isNaN 함수 1 yamto 2020.12.28 180
314 실습문제 6장 6-(1) 어떻게 하는 건가요? 1 초보자 2020.12.23 215
313 실습문제 7장 5번 1 유등등 2020.12.17 710
312 13-5 하고 13-6 error 1 WebWeb 2020.12.09 148
311 7장 1번 1 2020.11.30 312
310 9장 실습문제 10번 계산기 만들기 2 호탱 2020.11.29 354
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 308
305 안녕하세요? 186쪽 예제 4-13 대해서 물어봅니다. 1 file 김현우 2020.11.02 125
304 5-3 220page 1 고수가되고싶어요 2020.10.24 141
목록
쓰기
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로