<input class="popup-uploadImage__input" value=""/>
<button class="popup-uploadImage__button--delete off">delete</button>
<button class="popup-uploadImage__button--upload off">upload</button>
.off{background:red; pointer-events: none;
opacity: 0.3;}
.on{background:green;}
const file = document.querySelector('.popup-uploadImage__input');
const uploadBtn = document.querySelector('.popup-uploadImage__button--upload');
const deleteBtn = document.querySelector('.popup-uploadImage__button--delete');
file.oninput = () =>{
if(file.value == ''){
uploadBtn.classList.add('off');
deleteBtn.classList.add('off');
uploadBtn.classList.remove('on');
deleteBtn.classList.remove('on');
}else{
uploadBtn.classList.add('on');
deleteBtn.classList.add('on');
uploadBtn.classList.remove('off');
deleteBtn.classList.remove('off');
}
}
deleteBtn.onclick = () =>{
file.value = '';
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.