Search code examples
javascriptbooleantemplate-strings

JavaScript returning boolean over 21 y/o within template string

I can't figure out how to implement a greater then formula within a template string to return a boolean value (see code).

const age = 47; // simplified for question
let html;

html =  `<ul>
            <li>Alcohol allowed?: ${if (age > 20) {return 'true'} else {return 'false'}}</li>
        </ul>`;

document.getElementById("replace").innerHTML = html;

<html>
    <body>
        <ul>
            <li>Alcohol allowed?: true/false</li>
        </ul>
    </body>
</html>
Solution

  • Your issue is that there is no need to return as you're not in a function. Instead, as all you're after is displaying true or false, you can simply just use the value of age > 20:

    const age = 47; // simplified for question
let html = `<ul>
             <li>Alcohol allowed?: ${age > 20}</li>
            </ul>`;

document.body.innerHTML = html;

    Alternatively, you can use a ternary if you would like to display other values than just true or false.

    See example below:

    const age = 47; // simplified for question
let html = `<ul>
             <li>Alcohol allowed?: ${age > 20 ? 'Above' : 'Below'}</li>
            </ul>`;

document.body.innerHTML = html;

    You can read more about the conditional (ternary) operator here.