如何正确替换输出？答案

【问题标题】：How to replace output properly?如何正确替换输出？
【发布时间】：2020-06-04 10:05:30
【问题描述】：

我最近制作了一个骰子游戏。我寻求有关如何构建功能按钮的帮助，并且能够做到。现在我正在尝试使每个结果都替换以前的输出，这样我就可以一遍又一遍地掷骰子，但一次只能在页面上掷一个骰子（所以不是掷骰子列表）。

请告诉我我在下面的代码中做错了什么，因为我已经查找了 .replace 并且在我看来它应该可以工作。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My own personal Dice Roll</title>
    <script src="dice.js"></script>
</head>
<body>

        <button onclick="diceRoll();" id="roll">Throw Dice</button>
        <h2>Dice Game:</h2>
        <div id= "output"></div>
</body> 
</html>

function diceRoll() {
    const value = [ 1, 2, 3, 4, 5, 6 ];
    let random = Math.floor(Math.random() * value.length + 1);
    let roll = `You rolled: ${random}`;
    output(roll);
}

function output(message) {
    document.getElementById('output').innerHTML += roll.replace(message + '<br/><br/>');
}

【问题讨论】：

标签： replace dice

【解决方案1】：

改变

document.getElementById('output').innerHTML += roll.replace(message + '<br/><br/>');

到

document.getElementById('output').innerHTML = message;

您不能在 output 函数中引用 roll。它在那里不存在。它存在于diceRoll 函数中，您将其值作为message 传递给output 函数，因此您在output 函数中将该值称为message。

x += y 是x = x + y 的简写，表示您将y 添加到x。如果您想改写该值，只需使用=。

replace method 不同。要使用替换方法，您需要三件事。您需要一个您感兴趣的字符串。然后您需要另一个要在第一个字符串中搜索的字符串。然后，如果您在第一个字符串中找到第二个字符串，则需要第三个字符串来替换它。它的工作原理是这样的：

var interestingString = "i hate js";
var searchString = "hate";
var replaceString = "love";

console.log( interestingString.replace(searchString, replaceString) );

您可以使用此方法来完成您正在尝试做的事情，但它会超出顶部。应该是这样的：

document.getElementById('output').innerHTML = document.getElementById('output').innerHTML.replace(document.getElementById('output').innerHTML, message);

【讨论】：