Не понимаю почему на мой взгляд не работают почти идентичный код
 

Вот рабочий вариант

<input type="color"><button class="btn">Применить цвет</button>

document.querySelector(".btn").onclick = function(){
	let userColor = document.querySelector("input[type=color]").value;
	let body = document.querySelector("body");
	body.style.backgroundColor = userColor;
}

Вот не рабочий вариант

<input type="color" id="input_color"><button id="applay_color">Применить цвет</button>

let inputColor = document.querySelector("input[type=color]").value;
let applayColor = document.getElementById("applay_color");
let body = document.querySelector("body");


applayColor.onclick = change;


function change(){
	body.style.backgroundColor = inputColor;
}

Не понимаю почему в одному случае сработало в другом нет.

Сергей Ракипов,
второй код, вы сохранили в строке 1 значение, которого ещё нет.
код первый вы взяли значение на момент клика.

Да точно это же так логично !!! Спасибо