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>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
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>