This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 8 years ago.
I have a little problem. Namely, I would like to get the value of my variable: count_green outside of my for loop. Has somebody an idea how I can do that?
Here is a snippet of my code:
function State(type, count, list_name){
var count_green = 0;
var count_yellow = 0;
var count_red = 0;
for (i = 0; i < count; i++){
var jqxhr = $.ajax( "/custom_data/getState/" + type[i]).done(function(result) {
for (j = 0; j < count; j++){
if(result.type == type[j]){
if(result.value == "GREEN"){
$("#" + type[j]).css("color","#468847");
count_green = count_green + 1;
}
if(result.value == "YELLOW"){
$("#" + type[j]).css("color","#f89406");
count_yellow = count_yellow + 1;
}
if(result.value == "RED"){
$("#" + type[j]).css("color","#b94a48");
count_red = count_red + 1;
}
}
}
});
}
//Here I would need the value of count_green, count_yellow and count_green
//Unfortunately they are outside of the for loop 0.
addCounters(count_green, count_yellow, count_red);
}
function addCounters(state_green, state_yellow, state_red){
$(".line").find(".list").append('<span class="badge pull-left count_badge badge-success">' + state_green + '</span>');
}
As you can see if I put the method call: addCounters in the for loop I get many badges why I need to access the count-variables: count_green, count_yellow and count_red outside of the for loop and ajax code.
I saw some solutions with callback but I need only one time the value of the variables, if I work with callback I get more then 1 time the values.
Thank you in advance.
One solution would be synchronous requests. http://api.jquery.com/jquery.ajax/ look at the async property.
$.ajax( "/custom_data/getState/" + type[i], {async: false}).done(...)
Another solution would look like this
var requestCount = 0;
for (i = 0; i < count; i++){
var jqxhr = $.ajax( "/custom_data/getState/" + type[i]).done(function(result) {
for (j = 0; j < count; j++){
if(result.type == type[j]){
if(result.value == "GREEN"){
$("#" + type[j]).css("color","#468847");
count_green = count_green + 1;
}
if(result.value == "YELLOW"){
$("#" + type[j]).css("color","#f89406");
count_yellow = count_yellow + 1;
}
if(result.value == "RED"){
$("#" + type[j]).css("color","#b94a48");
count_red = count_red + 1;
}
}
}
requestFinished(count_green, count_yellow, count_red);
});
}
function requestFinished(count_green, count_yellow, count_red){
requestCount++;
if(requestCount == count){//all requests finished
addCounters(count_green, count_yellow, count_red);
}
}
Related
I'm just learning now. Can you please help me, why am I not getting the correct output. This is my code:
//ask questions
var quiz = [
["When is Bulgaria established?", 681],
["What year was it before 16 years?", 2000],
["When does WWII ends?", 1945]
];
//variables
var answer = [];
var correct = [];
var wrong = [];
var correctAns = 0;
var wrongAns = 0;
var oList = "<ol>";
//function to print the result in ordered list
function printResult(result){
for(var j = 0; j < result.length; j++){
oList += "<li>" + result[i] + "</li>";
}
oList += "</ol>";
return oList;
}
function print(message) {
document.getElementById('output').innerHTML = message;
}
//looping, adding correct and wrong answeres
for(var i = 0; i < 3; i++) {
answer[i] = prompt(quiz[i][0]);
if(parseInt(answer[i]) == quiz[i][1]){
correct.push(quiz[i][0]);
correctAns++;
} else {
wrong.push(quiz[i][0]);
wrongAns++;
}
}
//print logic
if(correct.length < 1 || correct == undefined){
print("You did not guess any of the quiestions!");
} else if (correct.length >= 1){
print("You have guessed " + correctAns + " questions.");
print(printResult(correct));
print("You have " + wrongAns + " wrong answeres.");
if(wrongAns > 0){
print(printResult(wrong));
}
}
I have watched this code over and over again and I still can't understand why am I getting undefined as a result. In the debugger, after the loop I check my vars and everything seems ok.
In your printResult function you are using var i instead of j,
Also you better use innerHtml+=message;
//ask questions
var quiz = [
["When is Bulgaria established?", 681],
["What year was it before 16 years?", 2000],
["When does WWII ends?", 1945]
];
//variables
var answer = [];
var correct = [];
var wrong = [];
var correctAns = 0;
var wrongAns = 0;
//function to print the result in ordered list
function printResult(result){
//HERE:
var oList = "<ol>";
for(var j = 0; j < result.length; j++){
oList += "<li>" + result[j] + "</li>";
}
oList += "</ol>";
return oList;
}
function print(message) {
document.getElementById('output').innerHTML += message;
}
//looping, adding correct and wrong answeres
for(var i = 0; i < 3; i++) {
answer[i] = prompt(quiz[i][0]);
if(parseInt(answer[i]) == quiz[i][1]){
correct.push(quiz[i][0]);
correctAns++;
} else {
wrong.push(quiz[i][0]);
wrongAns++;
}
}
//print logic
if(correct.length < 1 || correct == undefined){
print("You did not guess any of the quiestions!");
} else if (correct.length >= 1){
print("You have guessed " + correctAns + " questions.");
print(printResult(correct));
print("You have " + wrongAns + " wrong answeres.");
if(wrongAns > 0){
print(printResult(wrong));
}
}
<div id="output">
</div>
Basically you have three problems.
reuse of oList, the variable should be inside declared and used only in printResult.
Inside of printResult, use of i where j have been used and
At print, you replace the actual content with new content.
Just a small hint with variable names for counting. It is good practise to start always with i instead of j and go on with the letters in the alphabet.
var quiz = [["When is Bulgaria established?", 681], ["What year was it before 16 years?", 2000], ["When does WWII ends?", 1945]],
answer = [],
correct = [],
wrong = [],
correctAns = 0,
wrongAns = 0;
//function to print the result in ordered list
function printResult(result) {
var oList = "<ol>"; // !!! move variable inside of the function
for (var j = 0; j < result.length; j++) {
oList += "<li>" + result[j] + "</li>"; // !!! use j indstead if i
}
oList += "</ol>";
return oList;
}
function print(message) {
document.getElementById('output').innerHTML += message; // !!! append message
}
//looping, adding correct and wrong answeres
for (var i = 0; i < 3; i++) {
answer[i] = prompt(quiz[i][0]);
if (parseInt(answer[i]) == quiz[i][1]) {
correct.push(quiz[i][0]);
correctAns++;
} else {
wrong.push(quiz[i][0]);
wrongAns++;
}
}
//print logic
if (correct.length < 1 || correct == undefined) {
print("You did not guess any of the quiestions!");
} else if (correct.length >= 1) {
print("You have guessed " + correctAns + " questions.");
print(printResult(correct));
print("You have " + wrongAns + " wrong answeres.");
if (wrongAns > 0) {
print(printResult(wrong));
}
}
Your main mistake is using i intead of j:
for(var j = 0; j < result.length; j++){
oList += "<li>" + result[j] + "</li>";// here was i before
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
When vesselCount is 2 the code executes only once it does not enter the loop again
function showAllProducts(type, vesselIndex, prodCount,vesselCount) {
confirm (type+"==="+vesselIndex+"===="+prodCount);
for(i=0;i<vesselCount;i++) {
confirm("outerfor"+vesselCount);
vesselIndex=vesselIndex+i;
var tableId = "";
if(type=="regular") {
tableId = "productsTable"+vesselIndex;
confirm ("productsTable"+vesselIndex);
} else {
tableId = "productsTableCompV"+vesselIndex;
}
var productsTable = document.getElementById(tableId);
var prodCount = productsTable.rows.length-1;
confirm("productcount"+prodCount);
if(prodCount>0) {
var expandUp = "";
var expandDown = "";
if(type == 'regular') {
expandUp = "productExpandUp";
expandDown = "productExpandDown";
} else {
expandUp = "compProductExpandUp";
expandDown = "compProductExpandDown";
}
for(i=0;i<prodCount;i++) {
var div1 = expandDown+vesselIndex+i;
var div2 = expandUp+vesselIndex+i;
showProductDetails(type, vesselIndex, i, div1, div2);
confirm("fordone");
}
}
}
}
...
function showProductDetails(type, vesselIndex, prodIndex, div1, div2){
var applContId = "";
if(type == 'regular') {
applContId = "productApplCont";
} else {
applContId = "compProductApplCont";
}
document.getElementById(applContId+vesselIndex+prodIndex).style.visibility = "visible";
document.getElementById(applContId+vesselIndex+prodIndex).style.display = "block";
var jobType = document.getElementById("jobType").value;
if(jobType=='INSP' || jobType=='MAR') {
if(type == 'regular') {
document.getElementById("productQuant"+vesselIndex+prodIndex).style.visibility = "visible";
document.getElementById("productQuant"+vesselIndex+prodIndex).style.display = "block";
}
}
document.getElementById(div1).style.visibility = "visible";
document.getElementById(div2).style.visibility = "hidden";
}
Your inner for loop is using the same variable as your outer for loop (i). Change it to another variable.
for(var j = 0; j < prodCount; j++) { }
You are reusing the i variable in an inner for loop within the top for loop
function showAllProducts(type, vesselIndex, prodCount, vesselCount) {
confirm(type + "===" + vesselIndex + "====" + prodCount);
for (i = 0; i < vesselCount; i++) {
if (prodCount > 0) {
for (i = 0; i < prodCount; i++) { // <===========
}
}
}
}
You have 2 for-loops,
line 4 for(i=0;i<vesselCount;i++)
and line 29 for(i=0;i<vesselCount;i++)
These two loops use the same iterate variable i, i in the second loop will overwrite the value in the first loop.
Pick a new iterate variable in the second loop should fix the bug:
function showAllProducts(type, vesselIndex, prodCount, vesselCount) {
confirm(type + "===" + vesselIndex + "====" + prodCount);
for (var i = 0; i < vesselCount; i++) {
confirm("outerfor" + vesselCount);
vesselIndex = vesselIndex + i;
var tableId = "";
if (type == "regular") {
tableId = "productsTable" + vesselIndex;
confirm("productsTable" + vesselIndex);
} else {
tableId = "productsTableCompV" + vesselIndex;
}
var productsTable = document.getElementById(tableId);
var prodCount = productsTable.rows.length - 1;
confirm("productcount" + prodCount);
if (prodCount > 0) {
var expandUp = "";
var expandDown = "";
if (type == 'regular') {
expandUp = "productExpandUp";
expandDown = "productExpandDown";
} else {
expandUp = "compProductExpandUp";
expandDown = "compProductExpandDown";
}
for (var j = 0; j < prodCount; j++) {
var div1 = expandDown + vesselIndex + j;
var div2 = expandUp + vesselIndex + j;
showProductDetails(type, vesselIndex, j, div1, div2);
confirm("fordone");
}
}
}
}
You are using same iterator for the loop
for(i=0;i<vesselCount;i++){
confirm("outerfor"+vesselCount);
vesselIndex=vesselIndex+i;
...
for(i=0;i<prodCount;i++){
var div1 = expandDown+vesselIndex+i;
var div2 = expandUp+vesselIndex+i;
showProductDetails(type, vesselIndex, i, div1, div2);
confirm("fordone");
}
...
}
Please, change the inner loop iterator variable
for(j=0;j<prodCount;j++)
I have been trying to write code that would use an embedded for loop to calculate the number of sections inside of each article (there is more than one so I can't use getID) in a document. When the button is clicked the code works but the numbers it calculates are completely off which means something isn't counting correctly. Here is my function:
<script>
function Calculations() {
var a = document.getElementsByTagName("article");
var s = 0;
var z = 0;
var x;
for (x = 0; x < a.length; x++) {
var cn = a[x].childNodes;
z++
for (i = 0; i < cn.length; i++) {
if (cn[i].nodeType == 1) {
if (cn[i].tagName == "P"); {
s++;
}
}
}
alert("Article " + z + " has " + s + " section.")
s = 0
}
alert("There are " + a.length + " total articles.")
}
</script>
Thank you so much for your help!
I need help for a project I am doing for school. We need to make a booking system for a cinema. To generate the chairs I made an array but how do I give each button an own ID?
This is my code:
function chair(){
for( i = 1 ; i <= 10; i = i + 1 ){
if ( i > 3 && i < 8 ){
document.write("<button>button</button>");
}else{
document.write("<button>hi</button>");
}
}
}
Well, you could do this:
document.write("<button id=btn" + i + ">button</button>");
Side notes:
You're falling prey to The Horror of Implicit Globals — declare your i variable.
Normally barring a reason to do something else, in programming we start with 0 rather than 1:
for (i = 0; i < 10; i = i + 1)
You don't have to, but that's the normal thing to do.
i = i + 1 can be written ++i ("increment i"):
for (i = 0; i < 10; ++i)
Again you don't have to, but that (or its cousin i++) would be much more common than i = i + 1.
document.write is fine for small class assignments and such, but just FWIW, you probably wouldn't want to use it in the real world. Use the DOM instead:
var btn = document.createElement("button");
btn.id = "btn" + i;
document.body.appendChild(btn);
HTH, as you're learning...
function chair()
{
var ID = 0;
for( i = 1 ; i <= 10; i = i + 1 )
{
if ( i > 3 && i < 8 ){
document.write("<button id=btn"+id+">button</button>");
} else{
document.write("<button id=btn"+id+">hi</button>");
}
id++;
}
}
var id=0;
for( i = 1 ; i <= 10; i = i + 1 )
{
if ( i > 3 && i < 8 )
{
document.write("<button id="+id+">button</button>");
id++;
}
else
{
document.write("<button id="+id+">hi</button>");
id++;
}
}
I would advise against document.write. You can do this
function chair() {
for (var i = 0; i < 10; i++) {
var btn = document.createElement("button");
btn.id = "btn" + i; // set the id
btn.innerHTML = (i > 3 && i < 8) ? "Button" : "hi";
document.body.appendChild(btn);
}
}
P.S I've updated the answer to meet T.J.Crowder's suggestions in his side notes.
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 9 years ago.
The following code creates 10 elements under <body id="container" />. When i click on any element, I always see an alert with the value 10.
How can I get each alert to show the index of each element?
for (var i = 0; i < 10; ++i) {
var id = "#element_" + i;
$("#container").append('<p id="element_' + i + '">foo</p>');
$(id).click(function (e) {
alert(i);
});
}
You need either closure or simply use $.on() with data:
for (var i = 0; i < 10; ++i) {
var id = "#element_" + i;
$("#container").append('<p id="element_' + i + '">foo</p>');
$(id).on("click", i, function (e) { alert(e.data); });
}
Don't make functions inside for loops
for (var i = 0; i < 10; ++i) {
$("#container").append('<p id="element_' + i + '">foo</p>');
}
$("#container > p").click(function (e) {
var idNum = this.id.split('_')[1];
alert(idNum); // 0, 1, 2 ...
});
DEMO
need to create a private closure
for (var i = 0; i < 10; ++i) {
(function(idx){
var id = "#element_" + idx;
$("#container").append('<p id="element_' + idx + '">foo</p>');
$(id).click(function (e) {
alert(idx);
});
})(i)
}
Demo: Plunker