Javascript loop start problem
I created a function to split values and run in a for loop, but the for loop ends after one loop.
If I have an array with 4 elements, it only runs once:
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";
}
}
source to share
see the console where you get the error.
Uncaught TypeError: Cannot read property 'style' of null
this is because there is no element specific identifiers 1
, 2
, 3
, 4
,5
so the first time it hits the loop you get a warning, then an error pops up and it breaks.
define all ids and it will work
here it is: http://jsfiddle.net/40y8a3p3/1/
- And according to what the
dsfq
other answer pointed out, I have another option to solve it, if there is a space in the text (characters that result in an array of strings that don't exactly match the element ids) can see this http: // jsfiddle. net / 40y8a3p3 / 3 /
Edit: As per the OP's comment below, I made some changes to the code .. http://jsfiddle.net/vkgg9rg1/10/ I just need to trim the white before detecting the element by id as it might contain white spaces.
source to share
The problem seems to be in the untidy result of the string splitting operation. It is very likely that there are whitespace around characters ,
which results in an array of strings that do not exactly match the element ids. Since the result document.getElementById(wished_stalls)
returns null
and the loop ends after the first round.
Use regexp in split method:
var array_WW = stall_wished.split(/\s*,\s*/);
Here is a demo where you can see the difference http://jsfiddle.net/ngy28ky2/
source to share
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 try something like this:
source to share