Javascript not writing space in the right space

Question

I have this javascript

function getTags(tags){
    tags = JSON.parse(tags);
    text = "";
    for (i = 0; i < tags.length; i++) {
        text += '<span class="label label-strong">' + tags[i] + '</span>&nbsp';
    }
    return text;
}

and this html with bootstrap 3

<div class="pull-right">
    <script>document.write(getTags('["Factions", "Minigames"]'));</script>
</div>

and in the page, the space that should be between thoses span´s is writed after all the span´s. and even if i remove that "pull-right" the space keep´s been writed wrong

Thanks for the help

Why are you using `document.write()`? Sorry, I can't even think about your question until I know why you are using that. — gilly3, Jul 27 '15 at 23:26
Next, I want to know why you are using `JSON.parse()` instead of just passing an Array literal. — gilly3, Jul 27 '15 at 23:29
Seems to work as expected here: http://jsfiddle.net/jfriend00/eecL481L/. You end up with two `` tags, each followed by ` `. It is odd to pass JSON and then parse it when you could just pass an actual Javascript array, but it seems to work as is. — jfriend00, Jul 27 '15 at 23:29
in your sample, you'll end up with `FactionsSPACEMinigamesSPACE` - is that what you expect? is that NOT what you are getting? (SPACE is a space not the word SPACE) — Jaromanda X, Jul 27 '15 at 23:32
im using JSON.parse for the tags.length, if i didn´t used that, it returned the count of the caracters,i dont know why it is working there @jfriend00 i dont know why it is working there, but you can check it here, down there at the "teste" panel https://divinitycraft.serverlist.pt/blog — G4brym, Jul 27 '15 at 23:40
@Jaromanda X yes thats what i expect, but later i can remove that last space, but the space between the 2 span´s is not apearing — G4brym, Jul 27 '15 at 23:43

score 1 · Accepted Answer · edited May 23 '17 at 11:51

Many developers will tell you that document.write() is evil. I tend to agree with Peter Bailey's response that it is just easy to grossly misuse it.

At any rate, your script started out reasonably safe, but then Rocket Loader got a hold of it and decided to try and run it later, after the page had loaded. It's supposed to be able to "safely run any JavaScript code after window.onload", which implies that it modifies your script to be safe to run. You can't safely execute document.write() after window.onload.

Whatever Rocket Loader is doing, it's breaking your code, because when run as real JavaScript and not "RocketScript", it works just fine. So, you can either edit your script to be "safe", or disable RocketScript. A safer way to write your code would be to build the nodes dynamically. Your page already uses jQuery, so this sample code does as well:

$(function(){
    var nbsp = "\xA0";
    $("[data-tags]").each(function(){
        var el = $(this);
        var tags = el.data("tags").split(",");
        for (var i = 0; i < tags.length; i++) {
            var tag = $("<span>");
            tag.addClass("label label-strong");
            tag.text(tags[i]);
            el.append(tag, nbsp);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div class="pull-right" data-tags="Factions,Minigames"></div>

that´s not working, you can check it here https://divinitycraft.serverlist.pt/blog — G4brym, Jul 27 '15 at 23:47
@G4brym - try disabling [Rocket Loader](https://support.cloudflare.com/hc/en-us/articles/200168056-What-does-Rocket-Loader-do-). — gilly3, Jul 27 '15 at 23:52
@G4brym - I rewrote my answer, based on discovering that your code is run through Rocket Loader. — gilly3, Jul 28 '15 at 00:18
thanks, now it works, but you have any sugestion to make it work with rocket loader? — G4brym, Jul 28 '15 at 00:18

Javascript not writing space in the right space

1 Answers1