Short way of writing compare values

Question

Hi Is there a shorter way of writing the following code?

(data === "item1" || data === "item2" || data === "item3" || data === "item4")

like

(data === "item1" to data === "item4")

as my list will be over 100 items.

Heres a jsfiddle with the code in it.

Please note this only has to work on IE11. Here is the piece of code

ar list = document.querySelectorAll("#dragsource li");
for (i = 0; i < list.length; i++) {
  list[i].draggable = true;
  list[i].ondragstart = function(event) {
    var event = event || window.event;
    var dt = event.dataTransfer;
    dt.setData("text", event.target.id);
    dt.effectAllowed = "move";
    var data = dt.getData("text");

    if ((document.getElementById("onoff").value == "On") && (data === "item1" || data === "item2" || data === "item3" || data === "item4")) {
      (document.getElementById("fruit").style.color = "red") && (document.getElementById("veg").style.color = "black") && (document.getElementById("games").style.color = "black");
    } else if ((document.getElementById("onoff").value == "On") && (data === "item5" || data === "item6" || data === "item7" || data === "item8")) {
      (document.getElementById("veg").style.color = "red") && (document.getElementById("fruit").style.color = "black") && (document.getElementById("games").style.color = "black");
    } else if ((document.getElementById("onoff").value == "On") && (data === "item9" || data === "item10" || data === "item11" || data === "item12")) {
      (document.getElementById("games").style.color = "red") && (document.getElementById("fruit").style.color = "black") && (document.getElementById("veg").style.color = "black");
    } else if ((document.getElementById("onoff").value == "Off") && (data === "item1" || data === "item2" || data === "item3" || data === "item4" || data === "item5" || data === "item6" || data === "item7" || data === "item8" || data === "item9" || data === "item10" || data === "item11" || data === "item12")) {
      (document.getElementById("fruit").style.color = "black") && (document.getElementById("veg").style.color = "black") && (document.getElementById("games").style.color = "black");
    }

  };
}

rojo - I have tried to shorten this :-

target1.ondrop=function(event) {
var event=event||window.event;
var dt=event.dataTransfer;
event.preventDefault();
var data = dt.getData("text");
if(data === "item1" || data === "item2" || data === "item3" || data ===     "item4"){
target1.appendChild(document.getElementById(data));
}
};

By doing this this but does not work, no D&D & button not working. Where am I going wrong

target1.ondrop=function(event) {
var event=event||window.event;
var dt=event.dataTransfer;
event.preventDefault();
var data = dt.getData("text")num;
if (num = /^item(\d+)$/.exec(data)) num = num[1] * 1;
if(num <= 4){
target1.appendChild(document.getElementById(data));
}
};

**Not Quite Worked it out - comma missing after ("text") and bracket in wrong place ,should be in front off - if (num <= 4)

target1.ondrop=function(event) {
var event=event||window.event;
var dt=event.dataTransfer;
event.preventDefault();
var data = dt.getData("text"), num;
if (num = /^item(\d+)$/.exec(data)) num = num[1] * 1;
{if (num <= 4)
target1.appendChild(document.getElementById(data));
}
};

REVISED ELSE IF SOLUTION

target1.ondrop=function(event) {
var event=event||window.event;
var dt=event.dataTransfer;
event.preventDefault();
var data = dt.getData("text"), num;
if (num = /^item(\d+)$/.exec(data)) num = num[1] * 1;
if (num <= 4){
target1.appendChild(document.getElementById(data));
}
else if (num <= 8){
target2.appendChild(document.getElementById(data));
}
else if (num <= 12){
target3.appendChild(document.getElementById(data)); 
}
else if (num <= 60){
target4.appendChild(document.getElementById(data));  
}
else if (num <= 86){
target5.appendChild(document.getElementById(data));
}
};
};

Answer 1

You could regexp scrape and math your way out of the problem pretty easily.

var data = 'item12'; // demo value

if (num = /^item(\d+)$/.exec(data)) {
    num = num[1] * 1;
}

That will perform an assignment if the regexp is matched, coercing the value from a string into a number. If not matched, the assignment coerces as false, and num is null. With the given value of data='item12', the value of num is 12. From there, it's just a simple check of greater than / less than.

switch (true) {
    case (num < 5):
        /* relevant stuff here */
        break;
    case (num < 10):
        /* other relevant stuff here */
        break;
    case (num < 20):
        /* do something else */
        break;
    default:
        /* not matched by any of the conditions above */
}

With that switch statement, num with a value of 12 would trigger the third condition (num < 20).

---

Extra credit

Instead of this repetitive stuff:

document.getElementById("fruit").style.color = "black" && document.getElementById("veg").style.color = "black" && document.getElementById("games").style.color = "black"

Try this:

var colors = {
    "fruit": "black",
    "veg": "red",
    "games": "black"
}

for (var i in colors) {
    document.getElementById(i).style.color = colors[i];
}

Or, since you're doing a lot of color changes, write a function.

function color(id, foreground, background) {
    document.getElementById(id).style.color = foreground;
    document.getElementById(id).style.backgroundColor = background;
}

color('fruit','black','gold');
color('veg','red','black');
color('games','black','gold');

---

Here is your script rewritten with my suggested changes. Let this serve as an example of how writing functions to handle repetitive tasks can result in much less typing.

// arguments: {"id":"color", "id2":"color2", "id3":"color3", etc.}
function color(paramObj) {
    for (var i in paramObj) {
        document.getElementById(i).style.color = paramObj[i];
    }
}

var list = document.querySelectorAll("#dragsource li");
for (var i = 0; i < list.length; i++) {
    list[i].draggable = true;
    list[i].ondragstart = function(event) {
        var event = event || window.event,
            dt = event.dataTransfer;
        dt.setData("text", event.target.id);
        dt.effectAllowed = "move";
        var data = dt.getData("text"), num;

        if (num = /^item(\d+)$/.exec(data)) num = num[1] * 1;

        if (document.getElementById('onoff').value == 'On') {
            if (num <= 4) color({'fruit':'red','veg':'black','games':'black'});
            else if (num <= 8) color({'fruit':'black','veg':'red','games':'black'});
            else if (num <= 12) color({'fruit':'black','veg':'black','games':'red'});
        } else {    // #onoff value is "Off"
            if (num <= 12) color({'fruit':'black','veg':'black','games':'black'});
        }
    };
}

Answer 2

put the criteria values into an array.

var dataArray = ["item1", "item2", "item3"...]

then:

var targetValue = "item3";
if (dataArray.indexOf(targetValue) != -1)....