CODEWITHSUNDEEP
javascriptjqueryarrays
user8142459
user8142459

Reputation:

JS: a addClass function in jquery for some reason does nothing

The function showColorStart() for some reason does nothing. When the function is executed the background of the squares needs to change to the color of the string in the array colorspicked[lindex], and it does not do nothing. I looked at the code multiple times and i cant find the problem. How can I fix it?

The codepen is here.

// Setting Variables
var gameStatus = false;
var strict = false;
var playerTurn = true+;
var colors = ['green', 'red', 'yellow', 'blue'];
var colorsPicked = ['green', 'red', 'yellow', 'blue'];
var colorsClicked = [];
var level = 1;
var lIndex = 0;
// Game Status Function
$('#start').click(function(){
    if(gameStatus == false){
        gameStatus = true;
        gameStart();
    }
});
// Game Start Function
function gameStart(){

}
// Chaning color buttons
$('.cubes').click(function(e){
    if(playerTurn == true){
        $(e.target).addClass(e.target.id);
        setTimeout(function(){
            $(e.target).removeClass(e.target.id);
        }, 500);
    } else {
        return;
    }
});
// Random Color Picking Function
function randomColor(){
    var random = Math.floor(Math.random() * 4);
    colorsPicked.push(colors[random]);
}
// Colors Showing at Start of a level
function showColorStart(){
    lIndex = 0;
    setInterval(function(){
        if(colorsPicked[lIndex] == 'green'){
        $('#green').addClass('green');
    } else if(colorsPicked[lIndex] == 'red'){
        $('#red').addClass('red');
    } else if(colorsPicked[lIndex] == 'yellow'){
        $('#yellow').addClass('yellow');
    } else if(colorsPicked[lIndex] == 'blue'){
        $('#blue').addClass('blue');
    } else {
        return;
    }
    setTimeout(function(){
        $('#green', '#red', '#yellow', '#blue').removeClass('green, red, yellow, blue');
    }, 500);
    if(lIndex == colorsPicked.length){
        stopInterval();
    }
    }, 500);
  lIndex++;
}
showColorStart();
@import url('https://fonts.googleapis.com/css?family=Orbitron');

body {
  background-color: #000;
  margin: 0;
  padding: 0;
}

.container {
  margin: 0 auto;
  text-align: center;
  padding: 20px;
}

.menu {
  margin-bottom: 20px;
}

.display {
  width: 130px;
  height: 40px;
  background-color: #282828;
  margin: 0 auto;
  text-align: center;
  font-family: Orbitron, sans-serif;
}

table {
  margin: 0 auto;
}

.cubes {
  width: 150px;
  height: 150px;
}

#green {
  border: 2px solid green;
  border-right: 2px solid red;
}

#red {
  border: 2px solid red;
  border-bottom: 2px solid blue;
}

#yellow {
  border: 2px solid yellow;
}

#blue {
  border: 2px solid blue;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

#disp {
  font-size: 12px;
  color: #000;
  padding: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<div class="container">
  <div class="menu">
    <input type='button' value='Start/Restart' id='start' class='btn'>
    <input type='button' value='Strict' id='strict' class='btn'>
  </div>
  <div class='board'>
    <div class='display'><p id='disp'></p></div>
    <br>
    <table>
      <tbody>
        <tr>
          <td class='cubes' id='green'></td>
          <td class='cubes' id='red'></td>
        </tr>
        <tr>
          <td class='cubes' id='yellow'></td>
          <td class='cubes' id='blue'></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Upvotes: 1

Views: 37

Answers (2)

Kunvar Singh
Kunvar Singh

Reputation: 1885

Yupp, Remove the + sign from your code, Error on line No 4,

var playerTurn = true+;

replace it by var playerTurn = true;

Here is your mistake man, after removing this ,will work fine.

Upvotes: 0

Peter
Peter

Reputation: 1046

You've put a plus sign on this line where is doesn't belong causing an error

var playerTurn = true+;

change to

var playerTurn = true;

Upvotes: 3

Related Questions