메뉴 건너뛰기

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 18280
243 실습문제 9-7번 답안지를 보고 질문있습니다. 2 muuum 2018.10.23 300
242 마우스오버기능 이용해서 플레이되는 오디오 제작중인데요 1 file 성북동뽀글이 2019.01.25 292
241 6장 OPEN challenge 1 초보 2021.06.09 291
240 10장 예제 10-8에 오류가 있습니다. 1 file 삼오칠 2021.05.22 289
239 p.583 4번 질문드립니다. 6 열심히 공부하는 독자 2020.09.14 287
238 8장 실습문제 8번 질문이요! 4 mmii 2021.05.28 286
237 6장 실습문제 4번 질문 3 질문 2018.12.18 277
236 몽구스 서버 외부접속 질문드립니다. 1 명품프로그래머 2017.10.26 277
235 페이지에 첨부하고 싶은 이미지의 위치에대해 궁금합니다 1 정택희 2017.02.13 277
234 6장 오픈챌린지 질문 1 giggle 2020.11.23 275
233 오픈챌린지 4 1 오픈 2018.04.13 275
232 207p 4장 실습문제 3번 질문 1 file 웹개발초보 2019.10.19 274
231 오픈챌린지10번 재질문입니다. 2 이상 2019.08.30 267
230 간단한 질문입니다 1 ㅇㅇ 2018.03.04 267
229 432페이지 9장 실습문제9번 질문입니다. 1 asdf 2019.08.22 266
228 예제 2-19 1 새싹 2018.04.18 265
227 연습문제 4장 8번문제 1 file 도라에몽 2020.10.02 263
226 실습문제 8장 3번 문제 질문입니다. 2 Joahgng 2018.12.06 261
225 목록을 한줄로 나란하게 만드는 법 질문드립니다 3 file 입문한 사람 2020.04.04 260
224 몽구스 질문드립니다. 2 서동 2018.02.26 259
목록
쓰기
Board Pagination Prev 1 ... 4 5 6 7 8 9 10 11 12 13 ... 21 Next
/ 21
위로