CODEWITHSUNDEEP
javascripthtml
Joel Smith
Joel Smith

Reputation: 55

How to write if statement inside template literals

I want to write some logical if else statement inside the javascript template literals. I am adding html code through innerHTML and based on some logic, change html to something otherwise to something else. Please consider here that, this is an example code and the real code could be different or bigger

const main = document.getElementById('main');
const btn = document.getElementById('btn');

let x = 5;

btn.addEventListener('click', () => {
    main.innerHTML = `
    <h2>First</h2>
        ${if(x > 3) {
        return (
            `<h1>Its graeater also</h1>`
            )
    }}
  `;
})
<div id="main">
  
</div>

<button id="btn">
Click
</button>

Upvotes: 1

Views: 3291

Answers (2)

Hritik Sharma
Hritik Sharma

Reputation: 2010

You can either use ternary operator or && operator Like this :

       main.innerHTML = `
         <h2>First</h2> 
         ${x>3?'<h1>Its greater also</h1>':""}
      `;

or

main.innerHTML = `
        <h2>First</h2> 
        ${x>3&&'<h1>Its greater also</h1>'}
      `;


const main = document.getElementById('main');
const btn = document.getElementById('btn');

let x = 4;

btn.addEventListener('click', () => {
    //main.innerHTML = `
    //<h2>First</h2> 
    //${x>3?'<h1>Its greater also</h1>':""}
  //`;
   
    main.innerHTML = `
    <h2>First</h2> 
    ${x>3&&'<h1>Its greater also</h1>'}
  `;
})
<div id="main">
  
</div>

<button id="btn">
Click
</button>

Upvotes: 1

Travis
Travis

Reputation: 101

You would do it using the Conditional (ternary) operator like so.

${x > 3 ? '<h1>It's greater than 3</h1>' : '<h1>It's less than 3</h1>'}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

Upvotes: 2

Related Questions