javascript - JavaScript 代码中损坏的 "if"语句……-6ren

javascript - JavaScript 代码中损坏的 "if"语句……

转载作者：行者123 更新时间：2023-11-30 11:29:17

24

4

我正在尝试运行这段代码，除了 if 语句外，一切似乎都正常。即使存在匹配项，但它仍然不会显示代码中所示的正确答案，而是显示 else 语句中的代码。

var colors = [
  "rgb(255,0,0)",
  "rgb(255,255,0)",
  "rgb(0,255,0)",
  "rgb(0,255,255)",
  "rgb(0,0,255)",
  "rgb(255,0,255)"
]

var squares = document.querySelectorAll(".square");
var pickedColor = colors[3];
var colorDisplay = document.querySelector("#colorDisplay");

colorDisplay.textContent = pickedColor;


for (var i = 0; i < colors.length; i++) {
  //add initial colors to squares
  squares[i].style.background = colors[i];
  //add event listener
  squares[i].addEventListener("click", function() {
    //get color of picked square
    var clickedColor = this.style.background;
    //compare to the pickedColor
    console.log(clickedColor);
    if (clickedColor === pickedColor) {
      alert("COORREECCTT");
    } else {
      alert("WRROONGG!!");
    }
  });
}

body {
  background-color: #232323;
}

.square {
  width: 30%;
  background-color: purple;
  padding-bottom: 30%;
  float: left;
  margin: 1.66%;
}

#container {
  max-width: 600px;
  margin: 0 auto;
}

h1 {
  color: #fff;
}

<body>
  <h1>The Great <span id="colorDisplay">RGB</span> Color Game</h1>
  <div id="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</body>

最佳答案

var colors = [
  "rgb(255, 0, 0)",
  "rgb(255, 255, 0)",
  "rgb(0, 255, 0)",
  "rgb(0, 255, 255)",
  "rgb(0, 0, 255)",
  "rgb(255, 0, 255)"
]

var squares = document.querySelectorAll(".square");
var pickedColor = colors[3];
var colorDisplay = document.querySelector("#colorDisplay");

colorDisplay.textContent = pickedColor;


for (var i = 0; i < colors.length; i++) {
  //add initial colors to squares
  squares[i].style.background = colors[i];
  //add event listener
  squares[i].addEventListener("click", function() {
    //get color of picked square
    var clickedColor = this.style.background;
    //compare to the pickedColor
    console.log(clickedColor);
    if (clickedColor === pickedColor) {
      alert("COORREECCTT");
    } else {
      alert("WRROONGG!!");
    }
  });
}

body {
  background-color: #232323;
}

.square {
  width: 30%;
  background-color: purple;
  padding-bottom: 30%;
  float: left;
  margin: 1.66%;
}

#container {
  max-width: 600px;
  margin: 0 auto;
}

h1 {
  color: #fff;
}

<body>
  <h1>The Great <span id="colorDisplay">RGB</span> Color Game</h1>
  <div id="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</body>

var colors = [
  "rgb(255, 0, 0)",
  "rgb(255, 255, 0)",
  "rgb(0, 255, 0)",
  "rgb(0, 255, 255)",
  "rgb(0, 0, 255)",
  "rgb(255, 0, 255)"
]

我刚刚添加了空白..

关于javascript - JavaScript 代码中损坏的 "if"语句……，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46842980/

24

4

0

文章推荐： javascript - 不能使用 fnReloadAjax 数据表

文章推荐： ios - 使用 TableViewCell IndexPath 值执行 segue

文章推荐： java - 如何解密 LTPA token 版本 2

文章推荐： javascript - 无法在更改选择选项时显示文本

c - Posix AIO 损坏/损坏？
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this qu
F# - 损坏 "then"
我目前正在尝试制作一个非常简单的应用程序，它会根据一天中的时间问候。我的代码是: open System let read() = Console.Read() let readLine() = Co
elasticsearch - 损坏/未分配的Elasticsearch索引
我已经运行Elasticsearch服务很长时间了，但是突然遇到了以下情况由以下原因导致:org.elasticsearch.index.translog.TranslogCorruptedExce
browser - Cookie 损坏
我对执行以下操作的 php 重定向脚本有一个奇怪的问题: 在用户的浏览器中植入 Cookie，或者读取现有 Cookie(如果有)。将用户重定向到另一个网址(重定向的网址是原始网址中的参数，例如 h
itext - 表格单元格水平对齐被忽略/损坏
我正在使用 iText 7.0.0(Java 风格)，似乎表格单元格 HorizontalAlignment 被忽略，因为 CENTER 和 RIGHT 都不起作用。你能重现这个吗？ see th
swift - 变量多线程访问 - 损坏
简而言之: 我有一个可以从多个线程访问的计数器变量。尽管我已经实现了多线程读/写保护，但该变量似乎仍然以不一致的方式同时写入，导致计数器结果不正确。深入杂草: 我使用的“for 循环”会在后台触发大
Java:ArrayList 损坏？
我有一个 REST 项目，在访问控制服务类中保存用户的ArrayList。一切都工作正常，直到 REST Web 服务突然抛出 java.util.NoSuchElementException。单步查
正常重启后 MySQL 损坏
已关闭。此问题不符合Stack Overflow guidelines 。它目前不接受答案。这个问题似乎不是关于 a specific programming problem, a software
javascript - 刷新页面时本地存储加载投票(损坏)
当我刷新页面时，我无法显示 voteUp/Down，因为如果我执行 voteUp/Down(+1 或 -1) 并刷新页面，这会再次返回 voteUp/Down (0)。过去我使用 JSON，但社区推荐
c++ - 为什么链表中的数据在嵌套函数中发生更改/损坏？
我正在为离散时间 CPU 调度模拟器编写代码。它只是生成流程并相应地安排它们。我目前正在实现 FCFS 计划。我理解离散时间模拟器的本质，但我在用 C++ 实现时遇到了麻烦。问题出现在handleN
centos - Rpmdb 损坏
尝试使用 yum 部署包时出现错误: 2016-07-07 14:14:31,296 - ERROR - error: rpmdb: BDB0113 Thread/process 6723/1
堆的 C++ 损坏
我有一个简单的同步队列 template class SynchronisedQueue { public: void Enqueue(const T& d
Hadoop 损坏 block
我正在使用 hadoop 0.20.append 和 hbase 0.90.0。我将少量数据上传到 Hbase，然后出于评估目的杀死了 HMaster 和 Namenode。在此之后，我向 Hbase
PHP session 损坏
我使用 symfony 框架 1.4 创建了一个网站。我正在使用 sfguard 进行身份验证。现在，这在 WAMP (windows) 上运行良好。我可以在不同的浏览器上登录多个帐户并使用该网站。
java - HashMap 损坏/性能问题
目前我已经实现了 HashMap private static Map cached = new HashMap(); 和 Item 是一个具有属性的对象 Date expireTime 和 byte
WPF 单向绑定(bind)损坏
我试图将 2 个不同的 WPF 控件绑定(bind)到 ViewModel 中的同一属性，即 CheckBox.IsChecked 和 Expander.IsExpanded。我想要实现的行为是让 C
Gradle processResources 损坏 .jks
我希望这是一个简单的问题，但我没有找到答案。我想让 build.gradle 文件通过替换某些变量来设置我的 Spring Boot 应用程序中的版本。这与广告一样有效: def tokens =
c++ - 库包含 WinRT 损坏
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
c++ - OpenGL 批处理渲染器中的纹理出血/损坏
这个问题在这里已经有了答案: In a fragment shader, why can't I use a flat input integer to index a uniform array o
java - OSM xml 损坏？
我已经下载了 OSM 世界地图。解析时出现异常: osm bound changeset (...) changeset Exception in thread "main" org.xml.sax.

首页

博学

6Ren·AI

商城

javascript - JavaScript 代码中损坏的 "if"语句……