click 이벤트가 한 번에 작동 안돼요 도와주세요 선생님

[조용우]

존경하는 선생님 포트폴리오 관련 작업물 사이트를 만들다 의문이 생겨 글 올립니다.

다름이 아니라 jquery없이 만들고 있는데 onclick이벤트로 이벤트를 줬는데

처음 화면 들어가면 꼭 한번에 작동 안하고 두번 쯤 클릭해야 작동하고 그 다음부턴 작동이 잘됩니다

이거 왜이럴까요 불러오는게 느린걸까요 왜죠...찾아봤는데 잘 모르겠어서 질문드립니다

우선 코드는

HTML
<div class="card sunrise__container">
        <div class="sunrise__video">
          <video src="img/Sunrise-22609.mp4" loop muted autoplay playsinline></video>
        </div>
        <div class="sunrise__text">
          <span>Click the Video</span>
        </div>
      </div>

 
CSS
.sunrise__container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #c4baba;
}

.sunrise__video {
  position: absolute;
  width: 300px;
  height: 400px;
  overflow: hidden;
  -webkit-clip-path: circle(15% at 50% 30%);
          clip-path: circle(15% at 50% 30%);
  transition: -webkit-clip-path 2s ease;
  transition: clip-path 2s ease;
  transition: clip-path 2s ease, -webkit-clip-path 2s ease;
  cursor: pointer;
}

 
Javascript
document.querySelector('.sunrise__video').onclick = function(){
    if(document.querySelector('.sunrise__video').style.clipPath == "circle(15% at 50% 30%)"){
        document.querySelector('.sunrise__video').style.clipPath = "circle(100% at 50% 30%)";
    } else{
         document.querySelector('.sunrise__video').style.clipPath = 'circle(15% at 50% 30%)';
    }
}

 

이렇습니다 보기 편하게 올리고픈데 혹시나 깃주소는

https://github.com/pomeranian91/ani_notepad.git

페이지는 

https://pomeranian91.github.io/ani_notepad/

입니다. 

[codingapple]

document.querySelector('.sunrise__video').style.clipPath

출력해보면 빈칸이라 그렇습니다 

circle(15% at 50% 30%) 이걸 style="" 에 넣거나 그래봅시다 

[조용우]

제가 이해를 잘 한게 맞을까요 ㅠㅠ 

그 일단 개발자도구 콘솔창에서 document.querySelector('.sunrise__video').style.clipPath 를 검색해보니 빈칸이 나와서 

클릭 이벤트 전에 document.querySelector('.sunrise__video').style.clipPath="circle(15% at 50% 30%)" 를 먼저 입력해서 값을 주고 했더니 되긴하는데 이게 맞나요?

아 그리고 궁금한게 처음에 document.querySelector('.sunrise__video').style.clipPath 여기 값이 '' 처럼 빈칸일때 클릭을 한번 하니 값이 생기던데 이건 왜그런걸까요?

[codingapple]

자바스크립트로 써도되고 html 안에 style 속성에 추가해도 될걸요

클릭하면 값이 생기는건 클릭하면 값을 생기게 하라고 코드를 짜놔서 그런듯요 

[조용우]

아!! 그 말씀이시군요 감사합니다! css에 스타일 준거랑은 다르게 html에 바로 style을 주면 우선순위가 높으니 제가 모르는 뭐 문법적 작동원리에 의해 저게 먼저 빡! 적용이 되는 이런 느낌인거죠? 

감사합니다!

[codingapple]

어쩌구.style은 style 속성 출력해달라는 문법이라 그렇습니다 

[조용우]

아 문법 자체가 틀린거군요 적절하지 못한 사용 아! 감사합니다! 더 공부하겠습니다

[글쓴이]

글