Question

我正在构建一个随机RGB值生成器，我想将值显示回用户。我尝试将document.write（rgb）放入函数newColor中，但是当我按下按钮时它会删除HTML并只显示javascript。如何动态显示RGB值？使用当前设置，它会显示第一个RGB值，但是当我按下按钮时，这些值保持不变。这是我到目前为止所拥有的。

<div class='container'>
<div class='jumbotron'>
<h1>Discover Color!</h1>
<button type='button' onclick="newColor()">New Color</button><br>
<script>
newColor();
function newColor() {
var random1 = Math.floor(Math.random() * 255);
var random2 = Math.floor(Math.random() * 255);
var random3 = Math.floor(Math.random() * 255);
window.rgb = "rgb(" + random1 + ", " + random2 + ", " + random3 +")"
document.body.style.backgroundColor = rgb;
};

document.write('<p>Your random color is ' + rgb + '.</p>');
</script>
<p>
    Explore new colors with my random color generator! Hit refresh for a completely new background.
</p>
</div>

Answer 1

在大多数情况下document.write是一个可怕的功能。相反，通过使用JavaScript选择元素并设置新内容来动态更改元素的内容。

在以下示例中，我添加了<code>标记，其中包含通过document.getElementById选择的ID，并使用textContent属性更新文本。

实施例

＆＃13;

<div class='container'>
<div class='jumbotron'>
<h1>Discover Color!</h1>
<button type='button' onclick="newColor()">New Color</button><br>
<p>Your random color is <code id="rgbtext">rgb</code>.</p>
<p>
    Explore new colors with my random color generator! Hit refresh for a completely new background.
</p>
<script>
var rgbtextelement = document.getElementById('rgbtext');
newColor();
function newColor() {
  var random1 = Math.floor(Math.random() * 255);
  var random2 = Math.floor(Math.random() * 255);
  var random3 = Math.floor(Math.random() * 255);
  var rgb = "rgb(" + random1 + ", " + random2 + ", " + random3 +")";
  rgbtextelement.textContent = rgb;
  document.body.style.backgroundColor = rgb;
};
</script>
</div>

＆＃13;

向用户显示RGB值

1 个答案:

实施例