이벤트

이벤트 참조 | MDN

// 이벤트 : addEventListener('이벤트종류', 함수)
        // 이벤트가 일어났을 경우 뒤의 함수를 실행한다.
        var button = document.querySelector('button');
        button.addEventListener('click', function(){
            console.log('클릭했음!');
            h1.classList.toggle('cool');
        });

// alert('test');

// 사용할 태그요소 객체를 변수에 저장한다.
var body = document.getElementById('gradient'); // 바디태그
var color1 = document.querySelector('.color1'); // 인풋컬러1
var color2 = document.querySelector('.color2'); // 인풋컬러2
var h3 = document.querySelector('h3'); // h3빈태그

// 이벤트를 연결한다.
color1.addEventListener('input', function(){
    body.style.background = "linear-gradient(to right, " + color1.value + "," + color2.value + ")";
});

color2.addEventListener('input', function(){
    body.style.background = "linear-gradient(to right, " + color1.value + "," + color2.value + ")";
});

섞인 색의 정보

함수로 만들기