CODEWITHSUNDEEP
javascripthtmlcss
Yep Yep
Yep Yep

Reputation: 530

How to override CSS using JavaScript?

I created an HTML page with three square images, every image is in a checkbox's label. I created a JavaScript function which checks how many checkboxes are checked.

On every input (which is a checkbox) I add an event listener, the goal of it is to limit The number of checked checkboxes to two. I used CSS so when an image is checked or hovered a red border appears.

My problem is that when I uncheck an image because my mouse is still on it I can't see that it was unchecked until my mouse isn't on the image.

So how can I override the CSS and hide or delete the border when an image is unchecked even if the mouse is still on it? I would like to use plain JavaScript for this.

    function checkedtimes(checkboxes) {
        return checkboxes
        .map(checkbox => document.getElementById(checkbox).checked)
        .reduce((x, y) => x + y)
    }
    let logos = ["green","yellow","blue"]
    for (let logo of logos) {
        logo = document.getElementById(logo)
        logo.addEventListener('change', e=> {
            e.preventDefault()
            if (logo.checked) {
                if (checkedtimes(logos)>2) {
                    logo.checked = false
                }
            }
            else {
            
            }
        })
    }
        
        #logos {
            display: flex;
            justify-content: center;
        }
        
       .logo {
            display: none;
        }
        .logo-label {
            display: inline-block;
            margin: 10px;
            text-align: center;
        }
        .logo:checked + .logo-label>img, .logo:hover + .logo-label>img {
            border: solid 2px red;
        }
<head>

</head>

<body>
    <form id="form">
        
        <div id="logos">
            <input type="checkbox" id="green" class="logo" />
            <label for="green" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAgAAAewB9vX2MxIybzJsAeQCr1Ku42rgAdwC527mBv4HZ7NkAcwB0uXR4unj8/vzz9/Pk8OTP5s/I4siy17KRx5GgzqCOxY6ezZ4n9oUoAAABg0lEQVR4nO3dS24CQQwA0Z4/zQx/BnL/k2aQyCLZBCEhKHe9E7jkrSWn3f4wHk+nPORzv2jv5uaX+mnr5l9z+4BL/4ghD3+M6TytFt2P6mN1T5k2qe9SZFVdQOElfGFbvXuIl7KQz0I+C/ks5LOQr4jCOXxhYyGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIV0RhbSGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8hVRuA5fGP9iyEI4C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5Cui8Bq+MP6fGQvhLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5iij8Cl/Yd+8e4qUs5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQbykcwhfm8IXxd2ghnIV8FvJZyGchn4V8FvLdCqcqstU2jZs6sm3+Bjn6EUWa4rsaAAAAAElFTkSuQmCC">
            <br>
            green
        </label>
            <input type="checkbox" id="yellow" class="logo"/>
            <label for="yellow" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAQlBMVEX//wCHhwB4eABqagBcXABRUQBeXgB6egCDgwBaWgBUVAAqKgCMjAAICAAsLAAwMAA2NgA/PwBERABzcwBmZgBISABKZ9uGAAABoUlEQVR4nO3dS07DQBAG4Z74FSfmFYf7XxUWLAAhgZBarfLUdwDrr6U1I008PD49v9xu0zRd5nGchw/7cvpkaf92/vKhHyzLPvzB/X3db+Z1+u5yjTWObYu5ekKyFmP1hGQt7tUTkrUYqicks5DPQj4L+Szks5Cvh8K9ekKyFkv1hGQtTtUTklnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXw9nB+26gnJLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9Cvhbn6gnJergxdPxbXxbSWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWcjXQ6G3Teh6eGfGQjoL+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+VrM1ROStRirJySzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTrofD4p9xr9YRkLS7VE5K1mKonJLOQz0I+C/ks5LOQz0I+C/l6KDz6H/AW160d2fb6BtUzB8w8fMwHAAAAAElFTkSuQmCC">
            <br>
            yellow
        </label>
            <input type="checkbox" id="blue" class="logo"/>
            <label for="blue" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAAP99ff+MjP+bm/+rq/+4uP+2tv+pqf+Kiv+Bgf/Z2f90dP94eP/8/P/z8//k5P/Pz//IyP+ysv+Rkf+Vlf+goP+urv+kpP+Ojv/Q7Co7AAABmUlEQVR4nO3dS04DMRAG4e5kJm8eCUng/ieFBQvEhgip1apxfb7AX0tLlhxPzy+H1/N5nufLNE3b9be31U+7/Lf96k/X9QNu0wPu82+bQ1xi2Y4xdU8olgMUvndPKJax7p5QzEI+C/ks5LOQz0K+EQqv3ROKZay6JxSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5RijcdU8oll9n2Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQr6MffeEYiO8GFr+qy8L6Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5Av46N7QrER/pmxkM5CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkG+Ewlv3hGIZ2+4JxTKm7gnFLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTLuHdPKJax6Z5QLGPunlDMQj4L+Szks5DPQj4L+SzkG6Fw6TfgUxyOuWSn+RNFSAfbc4zH5wAAAABJRU5ErkJggg==">
            <br>
            blue
        </label>
        </div>
    </form>
</body>

Upvotes: 2

Views: 507

Answers (3)

Grinnex.
Grinnex.

Reputation: 1049

You can just use style.setProperty(string, string). The first parameter is the CSS atttribute and the second parameter is the CSS value. Both of them need to be strings in order to work.

let element = document.getElementById("element-id")

element.style.setProperty('color', '#ffffff');

To know if the mouse is still hover the element you can create an event listener on the element.

element.addEventListener("mouseover", () => {
    element.style.setProperty('color', '#ffffff');
});

element.addEventListener("mouseout", () => {
    element.style.setProperty('color', '#000000');
});

Upvotes: 1

Lakshya Thakur
Lakshya Thakur

Reputation: 8318

This is more js oriented solution but I guess can work for you.

I am using mouseenter and mouseleave on img to simulate hover.

An additional click event on the img such that if the logo was checked and you clicked on the img, the border will be set to none else border will be set to solid 2px red.

function checkedtimes(checkboxes) {
        return checkboxes
        .map(checkbox => document.getElementById(checkbox).checked)
        .reduce((x, y) => x + y)
    }
    let logos = ["green","yellow","blue"]
    for (let logo of logos) {
        logo = document.getElementById(logo)
        logo.addEventListener('change', e=> {
            e.preventDefault()
            if (logo.checked) {
                if (checkedtimes(logos)>2) {
                    logo.checked = false
                }
            }
            else {
            
            }
        })
        const image = logo.nextElementSibling.firstElementChild;
       image.addEventListener('mouseenter',e=>{
         if(!logo.checked){
           image.style.border = 'solid 2px red';
         }
        })
        image.addEventListener('mouseleave',e=>{
        if(!logo.checked){
           image.style.border = 'none';
         }
        })
         image.addEventListener('click',e=>{
          if(logo.checked){
          image.style.border = 'none';
          }
          else {
          image.style.border = 'solid 2px red';
          }
         })
    }
#logos {
            display: flex;
            justify-content: center;
        }
        
       .logo {
            display: none;
        }
        .logo-label {
            display: inline-block;
            margin: 10px;
            text-align: center;
        }
        .logo:checked + .logo-label>img {
            border: solid 2px red;
        }
<head>

</head>

<body>
    <form id="form">
        
        <div id="logos">
            <input type="checkbox" id="green" class="logo" />
            <label for="green" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAgAAAewB9vX2MxIybzJsAeQCr1Ku42rgAdwC527mBv4HZ7NkAcwB0uXR4unj8/vzz9/Pk8OTP5s/I4siy17KRx5GgzqCOxY6ezZ4n9oUoAAABg0lEQVR4nO3dS24CQQwA0Z4/zQx/BnL/k2aQyCLZBCEhKHe9E7jkrSWn3f4wHk+nPORzv2jv5uaX+mnr5l9z+4BL/4ghD3+M6TytFt2P6mN1T5k2qe9SZFVdQOElfGFbvXuIl7KQz0I+C/ks5LOQr4jCOXxhYyGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIV0RhbSGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8hVRuA5fGP9iyEI4C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5Cui8Bq+MP6fGQvhLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5iij8Cl/Yd+8e4qUs5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQbykcwhfm8IXxd2ghnIV8FvJZyGchn4V8FvLdCqcqstU2jZs6sm3+Bjn6EUWa4rsaAAAAAElFTkSuQmCC">
            <br>
            green
        </label>
            <input type="checkbox" id="yellow" class="logo"/>
            <label for="yellow" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAQlBMVEX//wCHhwB4eABqagBcXABRUQBeXgB6egCDgwBaWgBUVAAqKgCMjAAICAAsLAAwMAA2NgA/PwBERABzcwBmZgBISABKZ9uGAAABoUlEQVR4nO3dS07DQBAG4Z74FSfmFYf7XxUWLAAhgZBarfLUdwDrr6U1I008PD49v9xu0zRd5nGchw/7cvpkaf92/vKhHyzLPvzB/X3db+Z1+u5yjTWObYu5ekKyFmP1hGQt7tUTkrUYqicks5DPQj4L+Szks5Cvh8K9ekKyFkv1hGQtTtUTklnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXw9nB+26gnJLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9Cvhbn6gnJergxdPxbXxbSWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWcjXQ6G3Teh6eGfGQjoL+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+VrM1ROStRirJySzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTrofD4p9xr9YRkLS7VE5K1mKonJLOQz0I+C/ks5LOQz0I+C/l6KDz6H/AW160d2fb6BtUzB8w8fMwHAAAAAElFTkSuQmCC">
            <br>
            yellow
        </label>
            <input type="checkbox" id="blue" class="logo"/>
            <label for="blue" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAAP99ff+MjP+bm/+rq/+4uP+2tv+pqf+Kiv+Bgf/Z2f90dP94eP/8/P/z8//k5P/Pz//IyP+ysv+Rkf+Vlf+goP+urv+kpP+Ojv/Q7Co7AAABmUlEQVR4nO3dS04DMRAG4e5kJm8eCUng/ieFBQvEhgip1apxfb7AX0tLlhxPzy+H1/N5nufLNE3b9be31U+7/Lf96k/X9QNu0wPu82+bQ1xi2Y4xdU8olgMUvndPKJax7p5QzEI+C/ks5LOQz0K+EQqv3ROKZay6JxSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5RijcdU8oll9n2Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQr6MffeEYiO8GFr+qy8L6Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5Av46N7QrER/pmxkM5CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkG+Ewlv3hGIZ2+4JxTKm7gnFLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTLuHdPKJax6Z5QLGPunlDMQj4L+Szks5DPQj4L+SzkG6Fw6TfgUxyOuWSn+RNFSAfbc4zH5wAAAABJRU5ErkJggg==">
            <br>
            blue
        </label>
        </div>
    </form>
</body>

Upvotes: 2

Oleh Morozov
Oleh Morozov

Reputation: 121

I think the problem is related to your css styling, as you are displaying a border around the picture when the mouse hovers over it. Please change your css by removing :hover

.logo:checked + .logo-label>img{
   border: solid 2px red;
}

Modified code snippet is below

function checkedtimes(checkboxes) {
        return checkboxes
        .map(checkbox => document.getElementById(checkbox).checked)
        .reduce((x, y) => x + y)
    }
    let logos = ["green","yellow","blue"]
    for (let logo of logos) {
        logo = document.getElementById(logo)
        logo.addEventListener('change', e=> {
            e.preventDefault()
            if (logo.checked) {
                if (checkedtimes(logos)>2) {
                    logo.checked = false
                }
            }
            else {
            
            }
        })
    }
        #logos {
            display: flex;
            justify-content: center;
        }
        
       .logo {
            display: none;
        }
        .logo-label {
            display: inline-block;
            margin: 10px;
            text-align: center;
            
        }
       .logo:checked + .logo-label>img{
            border: solid 2px red;
        }
<body>
    <form id="form">
        
        <div id="logos">
            <input type="checkbox" id="green" class="logo" />
            <label for="green" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAgAAAewB9vX2MxIybzJsAeQCr1Ku42rgAdwC527mBv4HZ7NkAcwB0uXR4unj8/vzz9/Pk8OTP5s/I4siy17KRx5GgzqCOxY6ezZ4n9oUoAAABg0lEQVR4nO3dS24CQQwA0Z4/zQx/BnL/k2aQyCLZBCEhKHe9E7jkrSWn3f4wHk+nPORzv2jv5uaX+mnr5l9z+4BL/4ghD3+M6TytFt2P6mN1T5k2qe9SZFVdQOElfGFbvXuIl7KQz0I+C/ks5LOQr4jCOXxhYyGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIV0RhbSGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8hVRuA5fGP9iyEI4C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5Cui8Bq+MP6fGQvhLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5iij8Cl/Yd+8e4qUs5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQbykcwhfm8IXxd2ghnIV8FvJZyGchn4V8FvLdCqcqstU2jZs6sm3+Bjn6EUWa4rsaAAAAAElFTkSuQmCC">
            <br>
            green
        </label>
            <input type="checkbox" id="yellow" class="logo"/>
            <label for="yellow" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAQlBMVEX//wCHhwB4eABqagBcXABRUQBeXgB6egCDgwBaWgBUVAAqKgCMjAAICAAsLAAwMAA2NgA/PwBERABzcwBmZgBISABKZ9uGAAABoUlEQVR4nO3dS07DQBAG4Z74FSfmFYf7XxUWLAAhgZBarfLUdwDrr6U1I008PD49v9xu0zRd5nGchw/7cvpkaf92/vKhHyzLPvzB/X3db+Z1+u5yjTWObYu5ekKyFmP1hGQt7tUTkrUYqicks5DPQj4L+Szks5Cvh8K9ekKyFkv1hGQtTtUTklnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXw9nB+26gnJLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9Cvhbn6gnJergxdPxbXxbSWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWcjXQ6G3Teh6eGfGQjoL+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+VrM1ROStRirJySzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTrofD4p9xr9YRkLS7VE5K1mKonJLOQz0I+C/ks5LOQz0I+C/l6KDz6H/AW160d2fb6BtUzB8w8fMwHAAAAAElFTkSuQmCC">
            <br>
            yellow
        </label>
            <input type="checkbox" id="blue" class="logo"/>
            <label for="blue" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAAP99ff+MjP+bm/+rq/+4uP+2tv+pqf+Kiv+Bgf/Z2f90dP94eP/8/P/z8//k5P/Pz//IyP+ysv+Rkf+Vlf+goP+urv+kpP+Ojv/Q7Co7AAABmUlEQVR4nO3dS04DMRAG4e5kJm8eCUng/ieFBQvEhgip1apxfb7AX0tLlhxPzy+H1/N5nufLNE3b9be31U+7/Lf96k/X9QNu0wPu82+bQ1xi2Y4xdU8olgMUvndPKJax7p5QzEI+C/ks5LOQz0K+EQqv3ROKZay6JxSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5RijcdU8oll9n2Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQr6MffeEYiO8GFr+qy8L6Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5Av46N7QrER/pmxkM5CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkG+Ewlv3hGIZ2+4JxTKm7gnFLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTLuHdPKJax6Z5QLGPunlDMQj4L+Szks5DPQj4L+SzkG6Fw6TfgUxyOuWSn+RNFSAfbc4zH5wAAAABJRU5ErkJggg==">
            <br>
            blue
        </label>
        </div>
    </form>
</body>

Just run code and check does it fit to you

Upvotes: 0

Related Questions