Write JavaScript style property in a single line

Question

This maybe a simple question . But i have no idea how to do it. This is one of my if statements in my js file.

 if (splitStatus[0].includes("LIGHTS TURNED OFF")){

button2.style.background='#00FA9A' ; 
button2.style.color='   black'; 
button2.style.boxShadow=' 0 0 20px 2px rgba(0, 148, 254, 0.825)';

button1.style.background ="black";  
button1.style.color ="white"; 
button1.style.boxShadow='black';
  }

this is only one of my if statements and i have many of them. is there a way to shorten this code? for example , apply all the styles to button 1 in a single line? and apply all styles to button 2 in a single line? Thank you for your time.

NOTE: I CAN HAVE MORE THAN 20 BUTTONS. S0 css class for each button wont help

Answer 1

The best would be to create CSS classes and add/remove it from element. BUT, if you really want everything to be encapsulated in your code you can use cssText property of element style to shorten your code:

e.g.

 if (splitStatus[0].includes("LIGHTS TURNED OFF")){

   button2.style.cssText= "background: #00FA9A; color: black ; boxShadow: 0 0 20px 2px rgba(0, 148, 254, 0.825);";

   button1.style.cssText = "background: black; color: white; boxShadow:black;";
 
 }

more info: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText

example: https://www.w3schools.com/jsref/prop_style_csstext.asp

Answer 2

Solution 1

In short, we added the buttons dynamically to the web page as an objects and gave them some keys and values for colors, backgrounds, and box-shadow.

If the input is checked style them using each button style depends on the value of it and the num key in each objcet. if not checked unset the style, or you can add another styles (keys and values in the objects) in case you want to style them.

All you have to do is to add buttons!

The code is commented, check it out

(function(){
    
    // Array To Hold HTML Output (The Buttons)
    let buttonsOutput = [];

    // Draw buttons function
    function drawButtons(){
        buttonsArray.forEach(button => {
            let btn = 
            `
            <button value="${button.num}" class="myBtn">${button.num}</button>
            `;

            buttonsOutput.push(btn);
        });

        buttonsContainer.innerHTML = buttonsOutput.join('');
    }

    // Get The Buttons Container
    let buttonsContainer = document.getElementById('buttons-container');

    // Array Of Buttons Objects
    let buttonsArray = [
        {num: "1", color: "red", background: "green", boxShadow: "0 0 1px 1px yellow"},
        {num: "2", color: "white", background: "purple", boxShadow: "0 0 1px 1px pinks"},
        {num: "3", color: "white", background: "red", boxShadow: "0 0 1px 1px black"},
        {num: "4", color: "green", background: "blue", boxShadow: "0 0 1px 1px gray"},
        {num: "5", color: "red", background: "green", boxShadow: "0 0 1px 1px orange"}
    ];

    // Run the function
    drawButtons();
    checkIfIncluded(buttonsArray);
})();


// Pass The Function To All Buttons To Set The New Style
function checkIfIncluded(arr){
    let myBtns = document.querySelectorAll('.myBtn');
    let input = document.getElementById('lights');

    // Add Event To The Input
    input.addEventListener('change', () => {
        // Loop Through The Buttons And The Array Of Buttons
        for(let i = 0; i < myBtns.length; i++){
            if(input.checked){
                // If Checked, Style it
                myBtns[i].style.color = arr[i].color;
                myBtns[i].style.background = arr[i].background;
                myBtns[i].style.boxShadow = arr[i].boxShadow;    
            } else {
                // If Not, UNSET The Style, Or You Can Add Another Colors To Set Them To In Case The Input Is Not Checked
                myBtns[i].style.color = 'unset';
                myBtns[i].style.background = 'unset';
                myBtns[i].style.boxShadow = 'unset';
            }
        }
    });
}

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #buttons-container {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }

        .myBtn {
            width: 50px;
            height: 40px;
            margin: 0 10px;
        }

        #input-box {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px;
        }

        #input-box input {
            width: 30px;
            height: 30px;
        }

<div id="input-box">
            <input id="lights" type="checkbox">
        </div>
        <div id="buttons-container"></div>

Solution 2

We only set the values of the buttons (of whatever attribute you'd name) in our HTML page and a class to loop and check. The same function from the Solution 1 for checking if checked and style it depending on the num and value.

// Array Of Buttons Objects
let buttonsArray = [
    {num: "1", color: "red", background: "green", boxShadow: "0 0 1px 1px yellow"},
    {num: "2", color: "white", background: "purple", boxShadow: "0 0 1px 1px pinks"},
    {num: "3", color: "white", background: "red", boxShadow: "0 0 1px 1px black"},
    {num: "4", color: "green", background: "blue", boxShadow: "0 0 1px 1px gray"},
    {num: "5", color: "red", background: "green", boxShadow: "0 0 1px 1px orange"}
];




function checkIfIncluded(arr){
    let myBtns = document.querySelectorAll('.myBtn');
    let input = document.getElementById('lights');

    // Add Event To The Input
    input.addEventListener('change', () => {
        // Loop Through The Buttons And The Array Of Buttons
        for(let i = 0; i < myBtns.length; i++){
            if(input.checked){
              // If checked, Style It
              myBtns[i].style.color = arr[i].color;
              myBtns[i].style.background = arr[i].background;
              myBtns[i].style.boxShadow = arr[i].boxShadow;    
            } else {
                // If Not, UNSET The Style, Or You Can Add Another Colors To Set Them To In Case The Input Is Not Checked
                myBtns[i].style.color = 'unset';
                myBtns[i].style.background = 'unset';
                myBtns[i].style.boxShadow = 'unset';
            }
        }
    });
}



// Run The Function
checkIfIncluded(buttonsArray);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#buttons-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.myBtn {
    width: 50px;
    height: 40px;
    margin: 0 10px;
}

#input-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
}

#input-box input {
    width: 30px;
    height: 30px;
}

<div id="input-box">
    <input id="lights" type="checkbox">
</div>
<div id="buttons-container">
    <button value="1" class="myBtn">1</button>      
    <button value="2" class="myBtn">2</button>        
    <button value="3" class="myBtn">3</button>
    <button value="4" class="myBtn">4</button>  
    <button value="5" class="myBtn">5</button>
</div>

Answer 3

You can still use Object.assign to achieve your one-liner and do unimaginable things with the flexibility, 'reusabilility' and 'mutability' of js objects...

let styleObject = {color: '#fff', 'background-color' : '#000'};
Object.assign(buttonX.style, styleObject) ;
// modify styleObject as you like and reuse... 

Answer 4

Put the different properties into the CSS instead, and toggle a class. Something like:

.lights-off .button1 {
  background: black;
  color: white;
  box-shadow: 'black';
}
.lights-off .button2 {
  background: #00FA9A;
  color: black;
  box-shadow: 0 0 20px 2px rgba(0, 148, 254, 0.825);
}

Then you could change your original code to

if (splitStatus[0].includes("LIGHTS TURNED OFF")){
  container.classList.add('lights-off');
}

where container is an ancestor of both buttons in the DOM.

WET JavaScript should usually be avoided. WET CSS is quite common and there's nothing inherently wrong with it, though in some cases it can be beneficial to make things less repetitive with a preprocessor like SASS.