个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在尝试制作一个 RGB 颜色猜谜游戏。它在第一次运行时运行良好。第二次使用New Game 按钮时，应该生成新的pickedColor 和一组随机颜色。尽管每次都会生成新的 pickedColor(在 第 30 行 中检查)，但是 pickedColor 的值会变回其之前的值 第 42 行。
为什么会这样？如何在第 30 行 和第 42 行 上获得相同的 pickedColor 值？
function getRandomColor() {
var arr = [];
var r = 0,
g = 0,
b = 0;
var temp;
for (var i = 0; i < 6; i++) {
r = Math.floor(Math.random() * 256);
g = Math.floor(Math.random() * 256);
b = Math.floor(Math.random() * 256);
arr[i] = "rgb(" + r + ", " + g + ", " + b + ")";
}
return arr;
}
function pickColor(colors) {
var num = Math.floor(Math.random() * colors.length);
return num;
}
function newGame() {
var colors = getRandomColor();
var colorTile = document.querySelectorAll(".colorTile");
var pickedColor = colors[pickColor(colors)];
console.log(pickedColor);
console.log(colors);
var rgbDisplay = document.querySelector("#rgbDisplay");
var h1 = document.querySelectorAll("h1");
rgbDisplay.textContent = pickedColor;
for (var i = 0; i < colorTile.length; i++) {
colorTile[i].style.backgroundColor = colors[i];
colorTile[i].addEventListener("click", function() {
console.log(pickedColor);
if (pickedColor === this.style.backgroundColor) {
h1[1].textContent = "Correct";
for (var j = 0; j < colorTile.length; j++) {
colorTile[j].style.backgroundColor = this.style.backgroundColor;
}
} else {
h1[1].textContent = "Incorrect";
this.style.backgroundColor = "black";
}
});
}
}
newGame();
var button = document.querySelectorAll("button");
button[0].addEventListener("click", function() {
var h1 = document.querySelectorAll("h1");
h1[1].textContent = "Click On Tile"
newGame();
});#container {
width: 600px;
height: 400px;
margin: 0px auto;
}
.colorTile {
background-color: red;
width: 30%;
margin: 1.6%;
padding-bottom: 30%;
float: left;
}
body {
background-color: black;
}
h1 {
color: yellow;
text-align: center;
}
button {
width: 20%;
height: 30px;
margin: 30px;
margin-left: 40%;
color: black;
background-color: yellow;
}
HTML<!DOCTYPE html>
<html lang="en" dir="ltr">
<link href="../css/ex160.css" rel="stylesheet">
<script defer src="../JavaScript/ex160.js"></script>
<head>
<meta charset="utf-8">
<title>Color Game</title>
</head>
<body>
<h1>The Great <span id="rgbDisplay">RGB</span> Game</h1>
<div id="container">
<div class="colorTile"></div>
<div class="colorTile"></div>
<div class="colorTile"></div>
<div class="colorTile"></div>
<div class="colorTile"></div>
<div class="colorTile"></div>
</div>
<h1>Click On Tile</h1>
<button class="restart"><em>New Game</em></button>
</body>
</html>最佳答案
您使用此行绑定(bind)了对 colorTile 元素的多次点击。
colorTile[i].addEventListener("click", function()
尝试 removeEventListener，然后像这样添加新的 removeEventListener
function getRandomColor()
{
var arr = [];
var r=0, g=0, b=0;
var temp;
for(var i=0; i<6; i++)
{
r = Math.floor(Math.random() * 256);
g = Math.floor(Math.random() * 256);
b = Math.floor(Math.random() * 256);
arr[i] = "rgb("+r+", "+g+", "+b+")";
}
return arr;
}
function pickColor(colors)
{
var num = Math.floor(Math.random() * colors.length);
return num;
}
var pickedColor = '';
var colorTile = document.querySelectorAll(".colorTile");
function newGame()
{
var colors = getRandomColor();
pickedColor = colors[pickColor(colors)];
console.log(pickedColor);
console.log(colors);
var rgbDisplay = document.querySelector("#rgbDisplay");
h1 = document.querySelectorAll("h1");
rgbDisplay.textContent = pickedColor;
for(var i=0; i<colorTile.length; i++)
{
colorTile[i].style.backgroundColor = colors[i];
colorTile[i].removeEventListener('click', fn)
colorTile[i].addEventListener("click", fn);
}
}
function fn (){
console.log(pickedColor);
if(pickedColor === this.style.backgroundColor)
{
h1[1].textContent = "Correct";
for(var j=0; j<colorTile.length; j++)
{
colorTile[j].style.backgroundColor = this.style.backgroundColor;
}
}
else{
h1[1].textContent = "Incorrect";
this.style.backgroundColor = "black";
}
}
newGame();
var button = document.querySelectorAll("button");
button[0].addEventListener("click", function(){
var h1 = document.querySelectorAll("h1");
h1[1].textContent = "Click On Tile"
newGame();
});
关于javascript - 变量在函数内部改变它的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50306673/
25
4
0
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: How to nest OR statements in JavaScript? 有没有办法做到这一点:
在 JavaScript 中有没有办法让一个变量总是等于一个变量？喜欢var1 = var2但是当var2更新，也是var1 . 例子 var var1 = document.getElementBy
我正在努力理解这代表什么 var1 = var2 == var3 我的猜测是这等同于: if (var2 == var3): var1 = var2 最佳答案 赋值 var1 = var2
这个问题已经有答案了: What does the PHP error message "Notice: Use of undefined constant" mean? (2 个回答) 已关闭 8
我在临时表中有几条记录，我想从每条记录中获取一个值并将其添加到一个变量中，例如 color | caption -------------------------------- re
如何将字符串转为变量(字符串变量--> $variable)？ 或者用逗号分隔的变量列表然后转换为实际变量。 我有 2 个文件: 列名文件 行文件 我需要根据字符串匹配行文件中的整行，并根据列名文件命
我有一个我无法解决的基本 php 问题，我也想了解为什么! $upperValueCB = 10; $passNodeMatrixSource = 'CB'; $topValue= '$uppe
这可能吗？ php $variable = $variable1 || $variable2? 如果 $variable1 为空则使用 $variable2 是否存在类似的东西？ 最佳答案 PHP 5
在 Perl 5.20 中，for 循环似乎能够修改模块作用域的变量，但不能修改父作用域中的词法变量。 #!/usr/bin/env perl use strict; use warnings; ou
为什么这不起作用: var variable; variable = variable.concat(variable2); $('#lunk').append(variable) 我无法弄清楚这一点
根据我的理解，在32位机器上，指针的sizeof是32位(4字节)，而在64位机器上，它是8字节。无论它们指向什么数据类型，它们都有固定的大小。我的计算机在 64 位上运行，但是当我打印包含 * 的大
例如: int a = 10; a += 1.5; 这运行得很完美，但是 a = a+1.5; 此作业表示类型不匹配:无法从 double 转换为 int。所以我的问题是:+= 运算符 和= 运算符
您好，我写了这个 MySQL 存储过程，但我一直收到这个语法错误 #1064 - You have an error in your SQL syntax; check the manual that
我试图在我的场景中显示特定的奖牌，这取决于你的高分是基于关卡的目标。 // Get Medal Colour if levelHighscore goalScore { sc
我必须维护相当古老的 Visual C++ 源代码的大型代码库。我发现代码如下: bIsOk = !!m_ptr->isOpen(some Parameters) bIsOk的数据类型是bool，is
我有一个从 MySQL 数据库中提取的动态产品列表。在 list 上有一个立即联系 按钮，我正在使用一个 jquery Modal 脚本，它会弹出一个表单。 我的问题是尝试将产品信息变量传递给该弹出窗
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: What is the difference between (type)value and type(va
jQuery Core Style Guidelines建议两种不同的方法来检查变量是否已定义。 全局变量:typeof variable === "undefined" 局部变量:variable
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: “Variable” Variables in Javascript? 我想肯定有一种方法可以在 JavaScrip
在语句中使用多重赋值有什么优点或缺点吗？在简单的例子中 var1 = var2 = true; 赋值是从右到左的(我相信 C# 中的所有赋值都是如此，而且可能是 Java，尽管我没有检查后者)。但是，
我是一名优秀的程序员,十分优秀！