How to return html code in a javascript function with conditional statements

Question

I have a javascript function where i return a html code. In that piece of return statement i want to use if conditions. Please guide me how to use that.

This is my javascript function:

function abc(param)
{
  var step =2;
  if(n>0){

    return `
        <div>
        **{% if step == '1' %}
          <div class="box" style="background-color:red" id="prodcolor">
           <span style="display:none"> Sample</span>
          </div>
        {% endif %}**
        </div>
    `;

  }
}

I have highlighted the place where i have used if statement. This is my javascript file.

RK_15 · Accepted Answer · 2019-03-14 05:50:27Z

2

Use different strings for different conditions:

function abc(param)
{
  var step =2;
  if(n>0){

    return step == '1' ? `
        <div>
          <div class="box" style="background-color:red" id="prodcolor">
           <span style="display:none"> Sample</span>
          </div>
        </div>
    `:"<div></div>"

  }
}

answered Mar 14, 2019 at 5:50

RK_15

9395 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cosimo wiSe Over a year ago

is it possible to target the placed HTML return like changing a class later or moving it in the DOM?

Talha · Accepted Answer · 2019-03-14 05:48:53Z

0

You can use string concatenation. Btw, I'm assuming n is global variable here somewhere.

var n = 1

function abc(param)
{
  var step = 2;
  var innerHtml = '';
  if(n>0){
    if (step == '1') {
      innerHtml = `
          <div class="box" style="background-color:red" id="prodcolor">
           <span style="display:none"> Sample</span>
          </div>
      `;
    }
    return `
        <div>
        ${innerHtml}
        </div>
    `;

  }
}

answered Mar 14, 2019 at 5:48

Talha

8179 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to return html code in a javascript function with conditional statements

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related