Question

我有以下功能：

function rollDice() {

    var diceRoll = Math.floor(Math.random() * 6) + 1; 
    document.getElementById("result").innerHTML = "You rolled a " + diceRoll + "!";

  }

我做了一个按钮激活网页上的功能，但是在我第二次点击它之后，它会替换消息而不是将文字放在第二行。如何将该函数放入另一行的另一个条目中？

{实施例}

按第一个按钮：

 You rolled a 4!

按第二个按钮：

 You rolled a 4!

 You rolled a 5!

Answer 1

将新字符串添加到现有值，然后是＆＃34; br＆＃34;标记以开始新行。

示例：

function rollDice() {

  var diceRoll = Math.floor(Math.random() * 6) + 1; 
  var str="You rolled a " + diceRoll + "!";
  document.getElementById("result").innerHTML += str+"<br>"

}

Answer 2

使用Node#insertAdjacentHTML代替Node#innerHTML，以避免重复将相同的未更改的HTML传递给解析器。

要使每个结果显示在新行上，请使用<br>标记。

＆＃13;

const roll = () => Math.floor(Math.random() * 6) + 1;
const format = input => `You rolled a ${ input }!<br>`;
const listen = e => result.insertAdjacentHTML('beforeend', format(roll()));
const result = document.querySelector('div');
const button = document.querySelector('button');
button.addEventListener('click', listen);

＆＃13;

<button>Click</button>
<div></div>

＆＃13;

使按钮在多行上显示文本的好方法是什么？

2 个答案: