JS_07_onclick

button onclick 속성

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button onclick="console.log('HI');">콘솔 1줄</button>
<button onclick="console.log('HI2'); console.log('HI2');">콘솔 2줄</button>
<button onclick="a();">함수 a</button>
<button onclick="b();">함수 b</button>
<button onclick="c();">함수 c</button>
<button onclick="d();">함수 d</button>
<button onclick="e();">함수 e</button>
<hr>
<div>
  텍스트
</div>

css

body {
  transition:background-color 2s;
}

js

console.clear();
function a() {
  console.log("HI3");
  console.log("HI3");
  console.log("HI3");
}
function b() {
  a();
  a();
  a();
}
function c() {
  $('body').css('background-color', 'gold');
}
function d() {
  // $('body').css('background-color', 'white');
  $('body').css('background-color', ''); // 위 처럼 하면 안되고, 이렇게 해야 함수 c가 한 작업이 취소되면서(body 엘리먼트에 들어간 인라인 스타일 속성이 제거 됨), 원래 배경색이 보여집니다.
}
let no = 0;
// a = 1001 % 2; // 1
// / => 나눈 몫
// % => 나눈 나머지
function e() {
  if ( no % 2 == 0 ) {
    $('div').css('background-color', 'green');
  }
  else {
    $('div').css('background-color', 'gold');
  }
  no = no + 1;
}