CODEWITHSUNDEEP
javascriptjquery
helloworld1234
helloworld1234

Reputation: 327

javascript cannnot detect same element in array

I have the code below:

var classCode = "";
var colorUsed = [];
var classes = [];
var color = ["yellow", "lightblue", "lightgreen", "pink", "orange", "cyan", "lightgrey", "plum", "wheat", "khaki"];

function colorClass(row) {
  classCode = $(row).html();
  var index = -1;

  if (colorUsed.length != 0) {
    index = classes.indexOf(classCode);
  } else {
    index = -1;
  }

  while (index == -1) {
    colorNum = Math.floor((Math.random() * 10));

    if (!(color[colorNum] in colorUsed)) {
      colorUsed.push(color[colorNum]);
      classes.push(classCode);
      index = 1;
    } else {
      alert("same color!");
      index = -1;
    }
  }

  if (index != -1) {
    colorNum = classes.indexOf(classCode);;
  }

  $(row).css("background-color", colorUsed[colorNum]);
}

   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
	<thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  </thead>
  <tbody>
  <tr><td colspan="3" onclick="colorClass(this);">ClassA</td></tr>
  <tr><td colspan="3" onclick="colorClass(this);">ClassC</td></tr>
  <tr><td colspan="3" onclick="colorClass(this);">ClassD</td></tr>
  <tr><td colspan="3" onclick="colorClass(this);">ClassE</td></tr>
  <tr><td colspan="3" onclick="colorClass(this);">ClassF</td></tr>
  <tr><td colspan="3" onclick="colorClass(this);">ClassG</td></tr>
  <tr><td colspan="3" onclick="colorClass(this);">ClassH</td></tr>
  </tbody>
</table>

I use "in" function to avoid same color to apply, but it is not working, I know there is another way to use which to loop the element one-by-one and compare it, but I don't like to use that.

Or any other way to detect it? Since there is no hashset in javascript, is it possible to implement in Jquery?

Upvotes: 1

Views: 64

Answers (3)

Pierre Arlaud
Pierre Arlaud

Reputation: 4133

I'm writting this answer to add some explanation for the answers already given:

In javascript, an array is an Object which maps integer keys (starting from 0) to their values.

Using the in operator on an array is not what you are looking for. This will check a property exists on the array (because – yet again – it's an object). It will be true for Array properties like length, for inherited properties like toString and for the keys of the array like 0 in case of an array with a size bigger than 1. It will not evaluate as true with the values of the array, except if the array contains weird values like "length".

If you want to look for a value, you can as others have suggested either use colorUsed.indexOf or use another structure like a hash in the form of a javascript object .

Upvotes: 0

Anshul Sanghi
Anshul Sanghi

Reputation: 94

Try writing

if (!(color[colorNum] in colorUsed)) {

as

if (colorUsed.indexOf(color[colorNum]) == -1) {

Hope it helped :)

Upvotes: 1

Nina Scholz
Nina Scholz

Reputation: 386550

You could use an object for colorUsed.

var colorUsed = {};

// assign
colorUsed[color[colorNum]] = true;

// test, as you already had
if (!(color[colorNum] in colorUsed)) {

// test, shorter
if (!colorUsed[color[colorNum]]) {

Upvotes: 0

Related Questions