Insert javascript into javascript html return

Question

I've got an HTML table that's being returned using javascript return function. It works perfectly until I try to add an additional if clause into the middle of it.

function format ( d ) {
    return '<div class="slider">'+     
    '<table id="expand">'+
        '<tr>'+
          '<td><button class="btn btn-success" value="Save" onclick="saveItem(this)" data-soli="'+d.soli+'" data-comments="'+d.comments+'" >Save</button></td>'+
        '</tr>'+
        '<tr>'+
            '<td class="dropHeader">Customer</td>'+
            '<td class="black">'+d.customer+'</td>'+
            '<td class="dropHeader">Value</td>'+

            if (d.country !== "usd") {
              '<td class="red">'+d.value+'</td>'+
            } else {
              '<td class="black">'+d.value+'</td>'+
            }                

            '<td class="dropHeader">Comments</td>'+
            '<td class="black"><input onblur="submitComments(this.value)" type="text"><br>'+d.comments+'</input></td>'+            
        '</tr>'+                                               
    '</table>'+    
   '</div>'; 
}

The code is failing when I add the if clause. Is this a syntax issue? How do I go about breaking the HTML for a second so I can add additional javascript into the return? My goal in this is to add the td class red whenever the line's currency is in USD, but I can't figure out how to get this to work.

@CodeGodie Yeah, I figured my Is this a syntax issue? statement kind of covered the fact that I understood that already...... — Brian Powell
– Brian Powell, Commented Jun 19, 2015 at 21:00

Walter Chapilliquen - wZVanG · Accepted Answer · 2015-06-18 15:50:43Z

5

Using Ternary operator, eg:

... etc ...
+
'<td class="dropHeader">Value</td>'
+
(d.country !== "usd" ? '<td class="red">'+d.value+'</td>' : '<td class="black">'+d.value+'</td>')
+
'<td class="dropHeader">Comments</td>'
+
... etc ...

edited Jun 18, 2015 at 15:50

answered Jun 18, 2015 at 15:45

Walter Chapilliquen - wZVanG

12.1k8 gold badges44 silver badges64 bronze badges

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

3 Comments

Brian Powell Over a year ago

This is really great as well! I didn't realize I could do this. I'm gonna read up on ternary operators as well. Thank you so much!

Walter Chapilliquen - wZVanG Over a year ago

@JohnWu then this is not the correct mark answer? :(

Brian Powell Over a year ago

well I can only mark one as the correct answer. They're all correct, so I marked one and gave the rest of you fake internet points. I chose the other answer because it's the solution I ended up going with.

Ava · Accepted Answer · 2015-06-18 15:48:23Z

4

Your error is because, in essence, you're doing the equivalent of:

return "Something" + if(condition){}else{} + " else";

Which is illegal syntax for Javascript.

There are two solutions to this; the first is to use the inline if statement, as such:

return "Something" + (x == y ? "output if succeeded" : "output if not") + ".";

So your inline if would turn into:

+ (d.country !== "usd" ? '<td class="red">'+d.value+'</td>' : '<td class="black">'+d.value+'</td>') +

Or for a second solution, you could have an output string that you append things to, as so:

function format(d){
    var output = "";

    output += "Testing code";

    if(d.country !== "usd"){
        output += "Woo we succeeded";
    }

    output += " more testing <i>code<i>.";

    return output;
}

answered Jun 18, 2015 at 15:48

Ava

2,4391 gold badge17 silver badges22 bronze badges

1 Comment

Brian Powell Over a year ago

yeah this is wonderful as well! Thank you for taking the time to write this - it's taught me a lot about different approaches I can take to solve this.

Sid M · Accepted Answer · 2015-06-18 15:46:55Z

1

Do it this way

function format ( d ) {
var cssClass="";
if (d.country !== "usd") {
cssClass="red";
}
else{
cssClass="black";
}
    return '<div class="slider">'+     
    '<table id="expand">'+
        '<tr>'+
          '<td><button class="btn btn-success" value="Save" onclick="saveItem(this)" data-soli="'+d.soli+'" data-comments="'+d.comments+'" >Save</button></td>'+
        '</tr>'+
        '<tr>'+
            '<td class="dropHeader">Customer</td>'+
            '<td class="black">'+d.customer+'</td>'+
            '<td class="dropHeader">Value</td>'+
            '<td class="'+cssClass+'">'+d.value+'</td>'+           
            '<td class="dropHeader">Comments</td>'+
            '<td class="black"><input onblur="submitComments(this.value)" type="text"><br>'+d.comments+'</input></td>'+            
        '</tr>'+                                               
    '</table>'+    
   '</div>'; 
}

answered Jun 18, 2015 at 15:46

Sid M

4,3744 gold badges33 silver badges51 bronze badges

1 Comment

Brian Powell Over a year ago

all of these responses are great as a learning experience, but this one is the one I'm gonna go with. It allows me to keep my code the same after the return, but just insert variables prior to that and use them. Thank you so much! Seems like such a simple oversight on my behalf :)

CodeGodie · Accepted Answer · 2015-06-18 15:50:03Z

1

Change this:

        if (d.country !== "usd") {
          '<td class="red">'+d.value+'</td>'+
        } else {
          '<td class="black">'+d.value+'</td>'+
        }

To this:

+((d.country !== "usd")?'<td class="red">'+d.value+'</td>':'<td class="black">'+d.value+'</td>')+

answered Jun 18, 2015 at 15:50

CodeGodie

12.2k6 gold badges40 silver badges66 bronze badges

Collectives™ on Stack Overflow

Insert javascript into javascript html return

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related