Question

我一直有这样的想法，即创建一个小型生成器，随机化一个英雄来玩，并为dota选择项目。长话短说到目前为止所有内容似乎都有效，但我不确定如何将结果分成单独的行

剧本中可能很重要的部分：

        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>

现在发生的事情就是我得到了这样的结果：英雄：英雄靴子：靴子第1项：第1项等。

我想得到的是：
英雄：英雄
靴子：靴子
第1项：第1项

有没有简单的方法来实现这个目标？

Answer 1

要在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

上有很多材料

Answer 2

简单回答，需要包含<br />，因为结果是HTML，而<br />是HTML。

Answer 3

您有三种选择：

为每个项目创建一个自己的段落元素
使用html换行符（<br />）并设置#result div的innerHTML

在文本（\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");

如何获得随机生成器结果的换行符？

3 个答案: