trouble in running for loop in JavaScript

Question

I have created a function for splitting values and run in a for loop but the for loop terminates after a single loop.

If I have an array with 4 items then it runs only one time:

function color_change() {
    //alert(document.getElementById("dom-target"));
    var div_fgh = document.getElementById("dom-target");
    var myData = div_fgh.textContent;
    //alert(myData);
    alert(myData);
    var stall_wished= myData;
    var array_WW= stall_wished.split(",");
    alert(array_WW.length);
    for (j=0;j<array_WW.length;j++){
        var wished_stalls = array_WW[j];
        alert(wished_stalls);
        document.getElementById(wished_stalls).style.background="#F90";
    }

}

Use var j = 0, in your code, so that it is a local variable, and does not conflict with any other variable named j. — dr_dev
– dr_dev, Commented Dec 24, 2014 at 11:24

Naeem Shaikh · Accepted Answer · 2014-12-24 14:21:29Z

1

http://jsfiddle.net/40y8a3p3/

see the console you get an error in it.

Uncaught TypeError: Cannot read property 'style' of null

this is because there is no element defined with ids 1 , 2 , 3 , 4 , 5

so for the first time it gets into loop gives you an alert then there is error and it breaks.

define all the ids, and it will work

here it is :http://jsfiddle.net/40y8a3p3/1/

And according to what dsfq pointed out in another answer, I have another option of solving it, if there is a space( characters which results into array of string that don't exactly match elements ids) inside the text you can see this http://jsfiddle.net/40y8a3p3/3/

Edit: According to OP's comment below, I made some changes to the code.. http://jsfiddle.net/vkgg9rg1/10/ I just need to trim the white spaces before finding the element by ID , since it may contain white spaces.

edited Dec 24, 2014 at 14:21

answered Dec 24, 2014 at 11:28

Naeem Shaikh

15.8k8 gold badges53 silver badges92 bronze badges

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

1 Comment

user2897328 Over a year ago

please check this i am trying this type jsfiddle.net/vipinwasim/vkgg9rg1/6

dfsq · Accepted Answer · 2014-12-24 11:31:36Z

0

The problem seems to be in untidy result of string split operation. Very likely that there are spaces around , characters which results into array of string that don't exactly match elements ids. So as the result document.getElementById(wished_stalls) returns null and loop fails after the first round.

Use regexp in split method:

var array_WW = stall_wished.split(/\s*,\s*/);

Here is the demo where you can see the difference http://jsfiddle.net/ngy28ky2/

answered Dec 24, 2014 at 11:31

dfsq

193k26 gold badges244 silver badges261 bronze badges

3 Comments

user2897328 Over a year ago

please check this i am trying this type jsfiddle.net/vipinwasim/vkgg9rg1/6

dfsq Over a year ago

@user2897328 Because you need to check if the div with such id exists: jsfiddle.net/vkgg9rg1/8

user2897328 Over a year ago

i checked your fiddle but there is one more problem in this function in for loop array have 3 or 4 values but its runs only one time how can i execute this according to array value or size

Suchit kumar · Accepted Answer · 2014-12-24 11:38:01Z

0

function color_change()
{
//alert(document.getElementById("dom-target"));
var div_fgh = document.getElementById("dom-target");
  var myData = div_fgh.textContent;
   // var myData = div_fgh.value;// use value if is input type.
console.log(myData);

var stall_wished= myData;
    var array_WW= stall_wished.split(",");
for (var j=0;j<array_WW.length;j++){

var wished_stalls = array_WW[j];

document.getElementById(wished_stalls).style.background="#F90";
}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dom-target">1,2,3,4,5</div>
<div id="1" style="width:10px;height:10px;border: 2px solid;"></div>
<div id="2" style="width:10px;height:10px;border: 2px solid;"></div>
<div id="3" style="width:10px;height:10px;border: 2px solid;"></div>
<input type="button" onclick="color_change()" value="Click"/>

see if you are trying something like this:

answered Dec 24, 2014 at 11:38

Suchit kumar

11.9k3 gold badges26 silver badges46 bronze badges

1 Comment

user2897328 Over a year ago

please check this i am trying this type jsfiddle.net/vipinwasim/vkgg9rg1/6

Collectives™ on Stack Overflow

trouble in running for loop in JavaScript

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related