hi guys I have a small piece of code in jquery and I have a problem. It seems that for loop jumps over the second parameter ( when i = 2), can you tell me what's wrong?
here is code:
var items = $(".item").length;
var currentIndex = items;
place(currentIndex);
function place(index){
var s1 = Math.floor(items / 2);
for (i = 1; i <= items; i++){
(function(i, index){
if (i <= s1){
var id = findNext(1, i);
console.log("i = " + i + " > id = " + id);
} else if ( i > s1){
console.log("i = " + i);
}
})(i, index);
}
}
function findNext(index, times){
var result = index;
for (i = 1; i <= times; i++){
if (result == items){
result = 1;
} else {
result ++;
}
}
return result;
}
console output shows this :
i = 1 > id = 2
i = 3
i = 4
so it seems that for loop jumps over the second parameter (when i = 2) can you tell me what's wrong?
In your primary loop inside the function place, you define a global variable i. You do the same inside findNext thus overwriting the original i variable. Define i using the var keyword so it is only accessible inside the scope in which it was created.
for (var i = 0; i <= items; i++) {
var id = findNext(1, i); assignment returns 3 when i=2 because of scooping.
Please refer this link: http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/
Related
I'd like to display each variable created by
while (i < document.getElementById("box").value.split("").length) {
this["numb_" + i] = document.getElementById("box").value.split("")[i];
i++;
};
to display in document.getElementById("text").innerHTML to make a result that looks like this in the webpage :foo + variable1created + foo + variable2created + foo + variable3created etc...The whole goal is to take numbers from the text box, split the digits, and display each digit separately (means with other text between), all automatically. End result text is loopable.
Here is my codepen so you can take a look at it (I made the code very simple :) here http://codepen.io/ninivert/pen/bdEYqx
I guess this is what you are looking for
var i = 0;
var num = this["numb_" + i];
while (!!num) {
process(num);
num = this["numb_" + (++i)];
};
Thanks to Katerina Tort for the help !
Updated the codepen to contain answer.
http://codepen.io/ninivert/pen/bdEYqx
function myFunction() {
var i = 0;
while (i < document.getElementById("box").value.split("").length) {
this["numb_" + i] = document.getElementById("box").value.split("")[i];
i++;
};
fillText();
}
function fillText(){
var i = 0;
var num = this["numb_" + i];
var result = '';
while (!!num) {
console.log(num)
result += process(num);
num = this["numb_" + (++i)];
}
document.getElementById("text").innerHTML = result;
}
function process(num) {
return 'foo' + num;
}
Here is my code. I do not quite understand why the for loop runs only once, both inner and outer. nodeList.length and innerNodeList.length show appropriate values when I generate alert messages. I see that both i and j do not increment beyond 0. Kindly point out anything wrong with the code.
function getCategoryElements() {
var newCategoryDiv = document.getElementById("category");
var nodeList = newCategoryDiv.childNodes;
for (var i = 0; i < nodeList.length; ++i) {
var innerNodeList = nodeList[i].childNodes;
alert("innerNodeList Length" + innerNodeList.length.toString());
for (var j = 0; j < innerNodeList.length; ++j) {
if (innerNodeList[j].nodeName == "SELECT") {
alert("inside select Node value " + innerNodeList[j].nodeValue.toString());
document.getElementById("newCategories").value =
document.getElementById("newCategories").value + '<%=delimiter%>' + innerNodeList[j].nodeValue;
} else if (innerNodeList[j].nodeName == "TEXTAREA") {
document.getElementById("newCategoriesData").value =
document.getElementById("newCategoriesData").value + '<%=delimiter%>' + innerNodeList[j].nodeValue;
}
}
}
}
var newCategoryDiv, nodeList, innerNodeList, innerNode, i, j;
newCategoryDiv = document.getElementById("category");
nodeList = newCategoryDiv.childNodes;
for (i = 0; i < nodeList.length; ++i) {
innerNodeList = nodeList[i].childNodes;
alert("innerNodeList Length" + innerNodeList.length.toString());
for (j = 0; j < innerNodeList.length; ++j) {
innerNode = innerNodeList[j];
if (innerNode.nodeName === "SELECT") {
alert("inside select Node value " + innerNode.nodeValue.toString());
document.getElementById("newCategories").value += '<%=delimiter%>' + innerNode.nodeValue;
} else if (innerNode.nodeName === "TEXTAREA") {
document.getElementById("newCategoriesData").value += '<%=delimiter%>' + innerNode.nodeValue;
}
// Will this work?
alert('Does this alert appear');
}
}
I took the liberty to refactor your code and clean it up a little bit. In case you're not aware, all variables have function scope in Javascript, so no matter where you declare them within a single function, Javascript treats them as if the variable declaration is the first statement.
It appears that your code is syntactically correct, and so I think that the most logical place to look for a problem is that there could be an error occurring after the last alert function call.
In order to check this, try adding another alert function call to the end of the inner loop. If it doesn't run, you'll know this is the case.
I'm doing "fifteen puzzle" game. I'm only a beginner, so I chose this project to implement. My problem is shuffle algorithm :
function shuffle() {
$('td').empty();
var p = 0;
var f = 0;
do {
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
var rand = arr[Math.floor(Math.random() * arr.length)];
if ($('#' + rand).is(':empty')) {
p = p + 1;
document.getElementById(rand).textContent = p
var f = $('td').not(":empty").length;
} else {}
} while (f < 15)
That works cool, but I've heard that almost 50% of all random shuffle like mine is unsolvable. So I found math formula at wikipedia.org for this game, explaining how you can avoid that.
Here's modified algorithm that doesn't work either. The way I know it is alert stuff: it launches only 2 times instead of 31.
array = [];
function algorithm (){
// alert('works')
for (var c=16; c<17; c++){
document.getElementById(c).textContent = '100';
}
for (var i=1; i<16; i++){
var curId = document.getElementById(i).id;
var curIdNum = Math.floor(curId);
alert('works')
var curIn = document.getElementById(i).textContent;
var curInNum = Math.floor(curIn);
array.push(i);
array[i] = new Array();
for (var j=1; j<15; j++){
var nextId = curIdNum + j; //curIdNum NOT cerIdNum
var nextIn = document.getElementById(nextId).textContent;
//alert('works')
if (nextId < 16){
var nextInNum = Math.floor(nextIn);
if (curInNum > nextInNum){
array[i].push(j)
}
}
}
var sum = 0;
for (var a=0; a<15; a++){
var add = array[a].length;
sum = sum + add;
}
var end = sum + 4;
if (end % 2 == 0){
document.getElementById('16').textContent = "";
}
else {
shuffle();
}
}
}
The question is the same:
What's wrong? Two-dimensional array doesn't work.If you've got any questions - ask.
Just to make it clear: 2 for loops with i and j should make a 2-dimensional array like this [ this is " var i" -->[1,3,4,5,7], this is "var i" too-->[5,7,9,14,15]]. Inside each i there's j. The for loop with var a should count the number of js inside each i. if the number of js is even, the code is finished and shuffle's accomplished, otherwise shuffle should be made once again.
var nextId = cerIdNum + j;
in that fiddle, I don't see this cerIdNum declared & defined neither as local nor as global variable, I suppose that is curIdNum
Please use the below definition of algorithm and let us know if this works. Basically, the alert messages would come only twice, since there were usages of undefined variables. For the purpose of illustration, I have placed comments at where the problem points occured. Due to these problems, your script would stop executing abruptly thereby resulting in the behavior you described.
Oh and by the way - I did not have time to go through the Wiki link provided - hence you will have to verify your logic is correct. However, I have definitely resolved the errors causing the behavior you observed.
As an aside - consider using jQuery, your code will be a lot cleaner...
function algorithm (){
// alert('works')
for (var c=16; c<17; c++){
document.getElementById(c).textContent = '100';
}
for (var i=1; i<16; i++){
var curId = document.getElementById(i).id;
var curIdNum = Math.floor(curId);
alert('works')
var curIn = document.getElementById(i).textContent;
var curInNum = Math.floor(curIn);
array.push(i);
for (var j=1; j<15; j++){
var nextId = curIdNum + j; //curIdNum NOT cerIdNum
var nextIn = document.getElementById(nextId).textContent;
//alert('works')
if (nextId < 16){
var nextInNum = Math.floor(nextIn);
if (curInNum > nextInNum){
array.push(j) //array[i].push does not make sense
}
}
}
var sum = 0;
for (var a=0; a<15; a++){
var add = array.length; //array[1].length does not make sense
sum = sum + add;
}
var end = sum + 4;
if (end % 2 == 0){
document.getElementById('16').textContent = "";
}
else {
shuffle();
}
}
}
I found the solution by totally rewriting the code. Thank everyone for help!
Here's what do work:
function shuffle (){
press = 1;
$('td').empty().removeClass();
p=0;
var f;
do {
var arr=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
var rand=arr[Math.floor(Math.random()*arr.length)];
if ($('#'+ rand).is(':empty')){
p = p + 1;
document.getElementById(rand).textContent = p
var f = $('td').not(":empty").length;
}
else{}
}while(f < 15){
winChance();
}
}
function winChance (){
array = [];
for (i=1;i<16;i++){
array[i]= new Array();
var currentId = $('#' + i).attr('id');
var currentIn = $('#' + i).html()
var currentIdNum = parseInt(currentId, 10);
var currentInNum = parseInt(currentIn, 10);
for (j=1;j<16;j++){
var nextId = currentIdNum + j;
if (nextId < 16){
var nextIn = $('#' + nextId).html();
var nextInNum = parseInt(nextIn, 10);
if (currentInNum > nextInNum){
array[i].push(j);
}
}
}
}
checkSum();
}
function checkSum(){
var sum = 0;
for (var a=1; a<16; a++){
var add = array[a].length;
sum = sum + add;
}
var end = sum + 4;
if (end % 2 == 0){}
else {
shuffle();
}
}
I have a multi-dimensional array. I need some sort of loop to randomly pick a string in the array and check to see if that string contains a character. If it doesn't, then repeat until it finds one.
I wrote a for loop that checks the array for the string, BUT it starts from 0 and works its way through the array until it finds it. I need it randomly pick a string in the array...any help?
jsFiddle --> http://jsfiddle.net/hz2MZ/1/
jQuery
$(document).ready(function() {
var myarr = [{"Name":"Bob", "Char":"134"},
{"Name":"Phil", "Char":"134"},
{"Name":"Jane", "Char":"1"},
{"Name":"Don", "Char":"4"},
{"Name":"Dan", "Char":"2"},
{"Name":"Jan", "Char":"12"},
{"Name":"Bill", "Char":"24"},
{"Name":"Sam", "Char":"14"},
{"Name":"Jake", "Char":"23"},
{"Name":"Ben", "Char":"3"}];
$('button').click(function() {
for(var i = 0; i < myarr.length; i++) {
if(myarr[i].Char.indexOf('2') !== -1) {
alert("Name: " + myarr[i].Name + "\nChar: " + myarr[i].Char);
return;
} else {}
}
});
});
My solution
$('button').click(function () {
var found = false;
while (!found) {
var randomIndex = Math.floor(Math.random() * myarr.length);
if (myarr[randomIndex].Char.indexOf('2') !== -1) {
alert("Name: " + myarr[randomIndex].Name + "\nChar: " + myarr[randomIndex].Char);
found = true;
} else {}
}
});
edit
Updated endless loop problem
$('button').click(function () {
var found = false;
var maxRandom = 20;
var currentRandom = 0;
while (!found && currentRandom < maxRandom) {
var randomIndex = Math.floor((Math.random() * myarr.length));
currentRandom++;
if (myarr[randomIndex].Char.indexOf('2') !== -1) {
alert("Name: " + myarr[randomIndex].Name + "\nChar: " + myarr[randomIndex].Char);
found = true;
} else {}
}
}
One approach is to copy the array, then randomly splice one member from the copy and check for the required value:
function randomValueByChar(arr, c) {
var a = arr.slice && arr.slice();
var i = a.length || 0;
var t;
while (i--) {
t = a.splice(Math.random() * i | 0, 1);
if (t[0].Char.indexOf(c) != -1) return t;
}
}
Another approach is to create an array of the indexes (e.g. [0,1,2,3…]), then randomly splice one value at a time and use it as an index to retrieve a value from the array. Both approaches will not have an infinite loop and will visit each member a maximum of once.
I'm working on a website project and I have a paragraph containing a list of items (it would work great as a ul, but needs to stay a p) that needs to have the first letter of each item bold. I've created a function to do this:
function inserter(string, splitter, skip) {
var array = string.split(splitter);
var len = array.length;
for(var i = 1; i < len; i++) {
var a = array[i];
var b = '<b>';
var c = '</b>';
if(a.substr(0, 3) != skip){
array[i] = splitter + b + a.substr(0,1) + c + a.substr(1);
} else {
array[i] = splitter + a;
}
}
var strFix = array.join("");
return strFix;
}
$(function(){
var text = $(".caps").html();
text = inserter(text, ': '); //bold the item after ': '
text = inserter(text, ', ', 'and'); // now bold after the comma ', ' and the skip variable which matches first three letters so the last and doesn't get bold
text = inserter(text, ', and '); //now for the item after the last 'and'
$(".caps").html(text);
});
But it needs to be called and the string iterated for every different splitter (which could ruin performance on pages with more than a few of these), and I'm wondering how I could just call it once so all the splitters are looked at during one iteration?
Example page:
http://heidikratzke.com/about.php
When you see the page, you will see that I will be doing this on multiple paragraphs within a jQuery slideshow.
If it doesn't seem like this will be a performance hit for slower browsers, I'll leave it as is.
Appreciate any suggestions on how to do it better.
One optimization you could make is to use the splitter you use to split the string into an array to join the array once the operation is finished:
function inserter(string, splitter, skip) {
var array = string.split(splitter);
var len = array.length;
for(var i = 1; i < len; i++) {
var a = array[i];
var b = '<b>';
var c = '</b>';
if(a.substr(0, 3) != skip){
array[i] = b + a.substr(0,1) + c + a.substr(1);
} else {
array[i] = a;
}
}
return array.join(splitter);
}
There's probably more you could do here as well, but this jumped out at me.
further optimization
The following gets variable declaration out of the loop:
function inserter(string, splitter, skip) {
var array = string.split(splitter);
var len = array.length;
var i, a, b='<b>', c='</b>';
for(i = 1; i < len; i++) {
a = array[i];
if(a.substr(0, 3) != skip){
array[i] = b + a.substr(0,1) + c + a.substr(1);
} else {
array[i] = a;
}
}
return array.join(splitter);
}