JSFiddle - React, Tailwind, and code Playground

by desdev

HTML

<input id="register-membership-number" type="text" />
<img src='' class="imgHighlight" width="300" height="300" />

CSS

.name {
    background-color: transparent;
}

.imgHighlight.gray {
    background-color: #80808066;
}

JavaScript

(function() {
    var inputs = document.getElementById('register-membership-number');
    if( !(inputs && inputs.length) ) return;
    
    function toggleGray(elem) {
        elem.classList.toggle('gray');
    }
    
    for(var i=0; i < inputs.length; i++) {
        var input = inputs[i];
        
        // focus
        input.addEventListener('focus', function() {
		toggleGray(document.getElementById("myBox").style.backgroundColor="#000000";);
        });
        
        // blur
        input.addEventListener('blur', function() {
             toggleGray(document.getElementsByClassName('imgHighlight'));
        });
    }
})();