How to write if statement inside template literals-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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

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

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>