0
私はjavascriptを使用してゲームを作成しようとしていますが、Firefoxにはバグが見つかりました。ゲームは簡単です。あなたは、RGBのhexacodeにどのような色があるのか推測する必要があります。 6つのボックスがあります。ボックスをクリックすると、間違っているか正しく表示されます。 Mozilla Firefoxで動作しない間、Chrome、IE、Operaでゲームは正常に動作しています。私はそれをデバッグするための警告を出し、Firefoxはそれを使っていくつかのインラインスタイルを追加します。下記のスクリーンショットとコードをご覧ください。うまくいけば、Firefoxでこの問題を解決する方法を教えてください。事前のおかげでMozillaブラウザのバグ
FIREFOX SCREENSHOT PROBLEM CHROME SCREENSHOT NO PROBLEM
<!DOCTYPE html>
<html>
<head>
<title>Color Game</title>
<style type="text/css">
\t body{
\t \t background-color: #232323;
\t }
\t h1 {
\t \t color:#fff;
\t }
\t .square {
\t \t width: 30%;
\t \t background: purple;
\t \t padding-bottom: 30%;
\t \t float: left;
\t \t margin: 1.66%;
\t }
\t #container {
\t \t max-width: 600px;
\t \t margin: 0px auto;
\t }
</style>
</head>
<body>
<h1>Guess what color is<span id="colorDisplay">RGB</span>
<br/>
Click the box to know what color it is.
</h1>
<div id="container">
\t <div class="square"> </div>
\t <div class="square"> </div>
\t <div class="square"> </div>
\t <div class="square"> </div>
\t <div class="square"> </div>
\t <div class="square"> </div>
</div>
<script type="text/javascript">
\t
\t var colors = [
\t "rgb(255, 0, 0)",
\t "rgb(255, 255, 0)",
\t "rgb(0, 255, 0)",
\t "rgb(0, 255, 255)",
\t "rgb(0, 0, 255)",
\t "rgb(255, 0, 255)"
\t ];
\t var squares = document.querySelectorAll(".square");
\t var pickedColor = colors[1];
\t var colorDisplay = document.querySelector("#colorDisplay");
\t colorDisplay.textContent = pickedColor;
\t for (var i=0; i<squares.length; i++){
\t \t //add initial colors to square
\t \t squares[i].style.background = colors[i];
\t \t //add click listener to square
\t \t squares[i].addEventListener("click",function(){
\t \t \t var clickedColor = this.style.background;
\t \t \t alert(clickedColor);
\t \t \t if (clickedColor === pickedColor){
\t \t \t \t alert("Correct");
\t \t \t } else{
\t \t \t \t alert("Wrong");
\t \t \t }
\t \t });
\t }
</script>
</body>
</html>
ありがとうございました！ – JackOfAllTrades