CODEWITHSUNDEEP
javascriptline-breaks
nzash
nzash

Reputation: 13

How to get a linebreak for random generator results?

I've been having this idea of creating a little generator that randomizes a hero to play and picks the items for dota. Long story short everything seems to be working so far, but I'm not sure how to get the results to be on seperate lines

The probably important part of the script:

        var randomNumber1 = parseInt(Math.random() * wordlist1.length);
        var randomNumber2 = parseInt(Math.random() * wordlist2.length);
        var randomNumber3 = parseInt(Math.random() * wordlist3.length);
        var randomNumber4 = parseInt(Math.random() * wordlist4.length);
        var randomNumber5 = parseInt(Math.random() * wordlist5.length);
        var randomNumber6 = parseInt(Math.random() * wordlist6.length);
        var randomNumber7 = parseInt(Math.random() * wordlist7.length);
        var hero = "Hero:" + wordlist1[randomNumber1];
        var boots = "Boots:" + wordlist2[randomNumber2];
        var item1 = "Item1:" + wordlist3[randomNumber3];
        var item2 = "Item2:" + wordlist4[randomNumber4];
        var item3 = "Item3:" + wordlist5[randomNumber5];
        var item4 = "Item4:" + wordlist6[randomNumber6];
        var item5 = "Item5:" + wordlist7[randomNumber7];

        var finalOutput = hero + " " + boots + " " + item1 + " " + item2 + " " + item3 + " " + item4 + " " + item5;
        //var name = wordlist1[randomNumber1] + " " + wordlist2[randomNumber2] + " " + wordlist3[randomNumber3] + " " + wordlist4[randomNumber4] + " " + wordlist5[randomNumber5] + " " + wordlist6[randomNumber6] + " " + wordlist7[randomNumber7];            

        //alert(name); //Remove first to slashes to alert the name

        //If there's already a name it is removed  
        if(document.getElementById("result")){
            document.getElementById("placeholder").removeChild(document.getElementById("result"));
        }
        // A div element is created to show the generated name. The Name is added as a textnode. Textnode is added to the placeholder.
        var element = document.createElement("div");
        element.setAttribute("id", "result");
        element.appendChild(document.createTextNode(finalOutput));
        document.getElementById("placeholder").appendChild(element);
    }       
</script>

Now what happens is that I get the result like this: Hero:Hero Boots:Boots Item1:Item1 etc.

What I want to get is this:
Hero: Hero
Boots: Boots
Item1: Item1

Is there any easy way to achieve this?

Upvotes: 0

Views: 137

Answers (3)

Bergi
Bergi

Reputation: 664538

You have three options:

  • Create an own paragraph element for each item
  • use html linebreaks (<br />) and set the innerHTML of your #result div

  • use linebreaks in the text (\n) and set the whitespace style of your div:

    div#result {
    white-space: pre;
    white-space: pre-line;
}

Also, please make your script code shorter by using an array of wordlists:

// wordlists = [wordlist1, wordlist2, ...];
var finaloutput = wordlists.map( function(list, index) {
    var word =  list[Math.floor(Math.random() * list.length)];
    if (index == 0)
        return "Hero: "+word;
    if (index == 1)
        return "Boots: "+word;
    return "Item"+(index-1)+": "+word;
 }).join("\n");

Upvotes: 0

Rasmus Franke
Rasmus Franke

Reputation: 4524

To create line breaks in HTML you need to create either a
element, or make paragraphs with the tag. The resulting HTML would look like this:

Hero: Hero<br/>
Boots: Boots<br/>
Item1: Item1<br/>

or

<p>Hero: Hero</p>
<p>Boots: Boots</p>
<p>Item1: Item1</p>

I'd recommend reading up some basic HTML tutorials if you want to continue, there are lots of material on for example w3schools

Upvotes: 2

Jakub
Jakub

Reputation: 20475

Simple answer, need to include <br /> as the result is HTML, and <br /> is HTML.

Upvotes: 0

Related Questions