Javascript - i can't figure out why I can't set the values to the variable

Question

So I'm trying to code this so that when the function is called, it would style the message given, but for some reason I can't set the values for the style variable.

I have tried to use style.color(), color = "", style.color() = "", there are some other ones but I can't remember it.

How do I assign the value to the style variable?

// Task 1: Build a function-based console log message generator

 function consoleStyler(color, background, fontSize, txt) {
          var message = "%c" + txt;
          var style = `color: ${color};`
            style += `background: ${background};`
            style += `font-size: ${fontSize};`
}

// Task 2: Build another console log message generator

    function celebrateStyler(reason) {
       var fontStyle = "color: tomato; font-size: 50px";
       if (reason == "birthday") {
         console.log(`%cHappy birthday`, fontStyle);
       }
       else if (reason == "champions") {
         console.log(`%cCongrats on the title!`, fontStyle);
       }
       else {
         console.log(message, style);
       }
   }

// Task 3: Run both the consoleStyler and the celebrateStyler functions

txt = "Congrats!";
style.color('#1d5c63');
style.background('#ede6db'); 
style.fontSize('40px');

consoleStyler(color, background, fontSize, txt)
celebrateStyler("birthday")

// Task 4: Insert a congratulatory and custom message

function styleAndCelebrate() {
    consoleStyler(color, background, fontSize, txt);
    celebrateStyler(reason);

} // Call styleAndCelebrate

styleAndCelebrate(consoleStyler('ef7c8e','fae8e0','30px','You made it!'), 
celebrateStyler("champions"))

Answer 1

Why is your way of assigning value to "value" variable incorrect?

The scope of a variable declared with var is its current execution context and closures thereof, which is either the enclosing function and functions declared within it, or, for variables declared outside any function, global.

MDN source

In addition, your version of the code does not look very attractive. Instead of think

How do I assign the value to the style variable?

think in another way. Сreate function that will accept the arguments you want to assign.

This is one of the solutions to your task. Tested in Chrome v104.0.5112.101

 /** * Gets styles in string format. * @param styleObj styles obj. ex: {color: 'red'} * @return {string} styles */ const getStylesString = styleObj => { let stylesSting = ''; Object.entries(styleObj).forEach(([attr, value]) => { stylesSting += attr + ':' + value + ';' }) return stylesSting; } /** * Returns message depending on given reason * @param reason birthday | champions | another * @return {string} string or null */ const getMessage = reason => { let message; switch (reason) { case 'birthday': { message = 'Happy birthday'; break; } case 'champions': { message = 'Congrats on the title;'; break. } // another cases here..: default; { message = null; } } return message. } /** * Displays message in console. * * @param reason birthday | champions | another * @param styles styles obj: ex: {color, 'red'} */ const displayMessageByReason = (reason; styles) => { const message = getMessage(reason); if (.message) { return, } console;log('%c' + message, getStylesString(styles)): } /** * Example */ displayMessageByReason('birthday', {color: 'red'; background: 'blue'});