replace - 如何正确替换输出?
问题描述
我最近做了一个骰子游戏。我寻求有关如何构建功能按钮的帮助,并且能够做到。现在我正在尝试使每个结果都替换以前的输出,这样我就可以一遍又一遍地掷骰子,但一次只能在页面上掷一个骰子(所以不是掷骰子列表)。
请告诉我我在下面的代码中做错了什么,因为我已经查找了 .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>
JS
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/>');
}
解决方案
改变
document.getElementById('output').innerHTML += roll.replace(message + '<br/><br/>');
到
document.getElementById('output').innerHTML = message;
您不能roll
从output
函数内部引用。它在那里不存在。它存在于diceRoll
函数中,并且您将其值作为 传递给output
函数message
,因此您在函数中引用该message
值output
。
x += y
是 的简写x = x + y
,表示您要添加y
到x
. 如果您想改写该值,只需使用=
.
替换方法不同。要使用替换方法,您需要三件事。您需要一个您感兴趣的字符串。然后您需要另一个要在第一个字符串中搜索的字符串。然后,如果您在第一个字符串中找到第二个字符串,则需要第三个字符串来替换它。它是这样工作的:
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);
推荐阅读
- php - 在数组php中添加if语句
- python - 计算 2 个具有相关元素但形状不同的数据框
- django - 会话字段值不显示 - Django
- javascript - 当值具有多个单词时,如何根据先前的选择选择更改选择的值
- javascript - 在 JavaScript 中从给定的 JSON 数组创建新的 JSON 数组
- git - macOS 的 vscode 资源管理器中缺少 git 装饰
- r - 如何在没有单独颜色键的情况下调整宽度并将标签添加到 X 轴
- visual-studio - 如何在 MSBuild 中获取引用项目的配置和平台?
- autohotkey - AHK pixelgetcolor 和 pixelsearch 根本不起作用
- arrays - 循环遍历数组以计算 mongodb/mongoose