Question

I’m writing a script that parses an XML file and displays it in html. Here it is:

<script>
$.get("api.xml", function (xml) {
    $(xml).find("row").each(function () {

       var date = $(this).attr('date');
       var amount = $(this).attr('amount');
       var balance = $(this).attr('balance');

document.write("A: " + date + "<br />B: " + amount + " ISK<br />C: " + balance + " ISK<br /><br /><br /><br />");
    });
});
</script>

I want to modify the output of “document.write”, so that if the value “amount” is positive, enter the word “green”, otherwise, if negative, enter the word “red”. I tried to write it as follows:

<script>
$.get("api.xml", function (xml) {
    $(xml).find("row").each(function () {

       var date = $(this).attr('date');
       var amount = $(this).attr('amount');
       var balance = $(this).attr('balance');

document.write("<script> if (amount >= 0) { document.write("green"); } else{ document.write("red"); } </scri" + "pt>");
    });
});
</script>

But in that piece, I get a syntax error in “document.write”. What I have written wrong and how could fix it?

Answer 1

I think you can compute the color before writing the output with document.write.
Something like this should work:

<script>
$.get("api.xml", function (xml) {
  $(xml).find("row").each(function () {
    var date = $(this).attr('date');
    var amount = $(this).attr('amount');
    var balance = $(this).attr('balance');

    var color = "green";
    if (amount < 0) {
     color = "red";
    }

    document.write("A: " + date + "<br />B: <span style='color:" + color + "'>" + amount + " ISK</span><br />C: " + balance + " ISK<br /><br /><br /><br />");
 });
});
</script>

(syntax unchecked)