javascript cannnot detect same element in array

Question

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?

Look at Array.indexOf() - that will remove the need for your first check and the later in — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Nov 2, 2016 at 10:14
@Utkanos Javascript !== jQuery, so asking if there are methods in jQuery to help is a valid question. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Nov 2, 2016 at 10:15
You need indexOf(), not in. Your code is most likely throwing at least one syntax error as in is not intended to be used as you are — Rory McCrossan
– Rory McCrossan, Commented Nov 2, 2016 at 10:15

Anshul Sanghi · Accepted Answer · 2016-11-02 10:22:30Z

1

Try writing

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

as

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

Hope it helped :)

answered Nov 2, 2016 at 10:22

Anshul Sanghi

1042 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nina Scholz · Accepted Answer · 2016-11-02 10:22:08Z

0

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]]) {

answered Nov 2, 2016 at 10:22

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Pierre Arlaud · Accepted Answer · 2016-11-02 10:35:42Z

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 .

Collectives™ on Stack Overflow

javascript cannnot detect same element in array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related