的JavaScript不执行if语句

-2

我有这样的循环，当我执行我的代码，它只是不执行if语句“别人”的语句。的JavaScript不执行if语句

截图：

enter image description here

来源

2017-08-18 Mahmoud Hamed

什么pickedColor和clickedColor的可能值。请在这里发布代码..不要上传代码图片。 – Rahul

请勿张贴的代码图像，张贴实际的代码文本 –

你应该看看什么是'this.style.background'返回，并不是所有的浏览器返回相同类型的格式为'background' –

我建议使用DOM dataset节省挑选颜色的指数，而不是颜色本身。

var colors=["rgb(99,49,25)","rgb(115,152,170)","rgb(195,171,20)","rgb(55,49,35)","rgb(177,134,98)","rgb(247,100,160)"] 
 

 
var squares = document.querySelectorAll(".square"); 
 
var colorDisplayed = document.querySelector("#colorDisplayed"); 
 
var pickedColor = 0; 
 
colorDisplayed.innerText = colors[pickedColor] 
 

 
var handler = function(e) { 
 
    var clickedColor = Number(e.target.dataset.colorIndex); // explicitly transform dataset colorIndex to Number 
 
    if (clickedColor === pickedColor) { // if don't want transforming, use `==' instead of `===' 
 
    alert("right"); 
 
    } else { 
 
    alert("wrong"); 
 
    } 
 
} 
 

 
for (var i = 0; i < squares.length; i++) { 
 
    squares[i].style.background = colors[i]; 
 
    squares[i].dataset.colorIndex = i; 
 
    squares[i].addEventListener("click", handler) 
 
}

.square {width: 100px;height: 100px;border: solid 1px black;float: left;}

<div id="colorDisplayed"></div> 
 
<div><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>

另一种方法是使用封闭到我保存到它。

var colors=["rgb(99,49,25)","rgb(115,152,170)","rgb(195,171,20)","rgb(55,49,35)","rgb(177,134,98)","rgb(247,100,160)"] 
 

 
var squares = document.querySelectorAll(".square"); 
 
var colorDisplayed = document.querySelector("#colorDisplayed"); 
 
var pickedColor = 0; 
 
colorDisplayed.innerText = colors[pickedColor] 
 

 
for (let i = 0; i < squares.length; i++) { // Notice keyword `let' here 
 
    squares[i].style.background = colors[i]; 
 
    squares[i].dataset.colorIndex = i; 
 
    squares[i].addEventListener("click", function() { 
 
    if (i === pickedColor) { // since i is "letted", i is different each in each event listener function 
 
     alert("right"); 
 
    } else { 
 
     alert("wrong"); 
 
    } 
 
    }) 
 
}

.square {width: 100px;height: 100px;border: solid 1px black;float: left;}

<div id="colorDisplayed"></div> 
 
<div><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>

来源

2017-08-18 04:11:04 no1xsyzy

其实这个问题是这样的代码：

squares[i].addEventListener("click" , function ...

从未添加的addEventListener一个循环中，因为当你点击，循环已经达到了结束！

我建议创建一个函数，并把它添加到您的.squares元素onclick，做你的逻辑在那里。

来源

2017-08-18 03:42:41

不应该有任何的JavaScript运行只要你点击任何东西。在此特殊情况下的问题 – no1xsyzy

实际上有设置，因为它没有使用改变了循环的每个迭代的变量，例如，不使用迭代变量'i'在环路中的事件监听器是好的。 –

@PatrickEvans也很好，如果循环变量'i'使用'let'定义，请参阅https://stackoverflow.com/a/45748425/6202760第二个片段 – no1xsyzy

var clickedcolor = this.style.backgroundColor;

来源

2017-08-18 03:43:44

仍然没有答案。 - 你甚至不尝试？或者因为我使用不同的浏览器？ – no1xsyzy

尝试'console.log（clickedcolor）; '并检查结果 –

'“rgb（99,49,25）”'将变成'“rgb（99，49，25）”' – no1xsyzy

的JavaScript不执行if语句

回答

相关问题