Как получить разрыв строки для результатов случайного генератора? - PullRequest
0 голосов
/ 31 января 2012

У меня была идея создать небольшой генератор, который рандомизирует героя и выбирает предметы для доты.Короче говоря, кажется, что все работает до сих пор, но я не уверен, как получить результаты для отдельных строк

Вероятно, важная часть сценария:

        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>

Теперь, что происходит, я получаю такой результат: Герой: Герой Сапоги: Сапоги Item1: Item1 и т. Д.

Что я хочу получить, это:
Hero: Hero
Boots: Boots
Item1: Item1

Есть ли простой способ добиться этого?

Ответы [ 3 ]

2 голосов
/ 31 января 2012

Чтобы создать разрывы строк в HTML, вам нужно создатьэлемент или сделать абзацы с тегом.Полученный HTML-код будет выглядеть следующим образом:

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

или

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

Я бы порекомендовал прочитать некоторые базовые учебники HTML, если вы хотите продолжить, есть много материала дляпример w3schools

0 голосов
/ 31 января 2012

У вас есть три варианта:

  • Создать собственный элемент абзаца для каждого элемента
  • используйте html переводы строк (<br />) и установите innerHTML вашего #result div
  • используйте разрывы строк в тексте (\n) и задайте стиль пробела для вашего div:

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

Также, пожалуйста, сделайте ваш код скрипта короче, используя массив списков слов:

// 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");
0 голосов
/ 31 января 2012

Простой ответ, необходимо включить <br /> в результате HTML, а <br /> - HTML.

...