Caitlin-havener Posted February 4, 2012 Share Posted February 4, 2012 Main html file (this will eventually contain a list of questions): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DIG4503 - Caitlin Havener - Assignment 1</title><script type="text/javascript" src="a1.js"></script></head><body><a href="answers.txt">click here</a><div id="responseDiv"></div></body></html> Javascript file: function sendRequest(fileName) { var xhr = new XMLHttpRequest(); if (xhr) { xhr.onreadystatechange = function() { displayResponse(xhr); } xhr.open("GET", fileName, true); xhr.send(null); } } function displayResponse(xhr) { if (xhr.readyState == 4) { if (xhr.status == 200 || xhr.status == 304) { console.log("responseText is: " + xhr.responseText); var allAnswers = xhr.responseText.split('\n'); var numberFlag= new Array(); for(var i=0; i<allAnswers.length; i++) { console.log(i + ": " + allAnswers[i]); var divideAnswer= allAnswers[i].split('*'); console.log(divideAnswer[0] + " and " + divideAnswer[1]); var responseDiv = document.getElementById('responseDiv'); //responseDiv.innerHTML = ""; //there will prob be a 'responsediv' under each question so that there is somewhere for each answer to come up if (divideAnswer[1]){ responseDiv.innerHTML += "<h3>" + divideAnswer[1] + "</h3>"; } //Flag how many of each question there are console.log("Show me what q and i look like:" + " q" + i); //'i' below should be the length of the questions, not the answers if (divideAnswer[0]=="q"+ i){ console.log("I match"); numberFlag[i] += 1; } console.log("There are this many answers for number one:" + numberFlag[1]); } } else if (xhr.status == 404) { console.log("Oops, file not found!"); } } } window.onload = function() { var anchor = document.getElementsByTagName('a'); anchor[0].addEventListener('click', function(e) { e.preventDefault(); sendRequest(this.href); }, false); } //if this.id= then look for questions that start with "q" + this.id +"*" Answers file (this will eventually have actual answers and not giberish): fillerq1* sldhfsdkfsdkfjsdq2* jsdfkjsdfkljsafq1* kjasdlfj Lame part to be stuck on... if (divideAnswer[0]=="q"+ i){console.log("I match");numberFlag += 1;} I'm trying to make a counter of how many answers there are for each question (some questions will have multiple answers). The above snippet should log "I match" three times and numberFlag[1] should equal 2 and numberFlag[2] should equal 1 but it is saying the value is undefined in console. What is wrong with that snippet or am I putting var numberFlag= newArray(); somewhere wrong lol Link to comment Share on other sites More sharing options...
Caitlin-havener Posted February 4, 2012 Author Share Posted February 4, 2012 function sendRequest(fileName) { var xhr = new XMLHttpRequest(); if (xhr) { xhr.onreadystatechange = function() { displayResponse(xhr); } xhr.open("GET", fileName, true); xhr.send(null); } } function displayResponse(xhr) { if (xhr.readyState == 4) { if (xhr.status == 200 || xhr.status == 304) { //console.log("responseText is: " + xhr.responseText); var allAnswers = xhr.responseText.split('\n'); var numberFlag= new Array(); var numberQuestions = 8; for(var i=0; i<allAnswers.length; i++) { //console.log(i + ": " + allAnswers[i]); var divideAnswer= allAnswers[i].split('*'); //console.log(divideAnswer[0] + " and " + divideAnswer[1]); var responseDiv = document.getElementById('responseDiv'); //responseDiv.innerHTML = ""; //there will prob be a 'responsediv' under each question so that there is somewhere for each answer to come up if (divideAnswer[1]) { responseDiv.innerHTML += "<h3>" + divideAnswer[1] + "</h3>"; } //divideAnswer[0] is the question number and divideAnswer[1] is the actual answer //Flag how many of each question there are for (var j=0; j<numberQuestions; j++) { if (divideAnswer[0]=="q"+ j){ console.log("I match"); numberFlag[j] += 1; // this returns a number but above returns NaN???? ---> numberFlag[2]=1; console.log("There are this many answers for number one:" + numberFlag[j]); } } console.log(numberFlag.toString()); } } else if (xhr.status == 404) { console.log("Oops, file not found!"); } } } window.onload = function() { var anchor = document.getElementsByTagName('a'); anchor[0].addEventListener('click', function(e) { e.preventDefault(); sendRequest(this.href); }, false); } //if this.id= then look for questions that start with "q" + this.id +"*" Now for each numberFlag[j] I'm getting NaN Link to comment Share on other sites More sharing options...
thescientist Posted February 4, 2012 Share Posted February 4, 2012 var allAnswers = xhr.responseText.split('\n'); var numberQuestions = 8; var numberFlags = []; for(var i=0; i<allAnswers.length; i++){ numberFlag[i] = 0; //rest of code //Flag how many of each question there are for (var j=0; j<numberQuestions; j++){ if (divideAnswer[0]=="q"+ j){ console.log("I match"); numberFlags[i]++; console.log("There are this many answers for number one:" + numberFlags[i]); } } console.log(numberFlags[i].toString()); } something like that, i may not have got all the closing curl braces Link to comment Share on other sites More sharing options...
Caitlin-havener Posted February 4, 2012 Author Share Posted February 4, 2012 function sendRequest(fileName) { var xhr = new XMLHttpRequest(); if (xhr) { xhr.onreadystatechange = function() { displayResponse(xhr); } xhr.open("GET", fileName, true); xhr.send(null); } } function displayResponse(xhr) { if (xhr.readyState == 4) { if (xhr.status == 200 || xhr.status == 304) { //console.log("responseText is: " + xhr.responseText); var allAnswers = xhr.responseText.split('\n'); var numberFlag= []; var numberQuestions = 8; for(var i=0; i<allAnswers.length; i++) { //console.log(i + ": " + allAnswers[i]); var divideAnswer= allAnswers[i].split('*'); //console.log(divideAnswer[0] + " and " + divideAnswer[1]); var responseDiv = document.getElementById('responseDiv'); //responseDiv.innerHTML = ""; //Write answer to appropriate question heading //responseDiv.innerHTML += "<h3>" + divideAnswer[1] + "</h3>"; //if value of link is q1 etc then display those particular answers in particular place //?????AT PARTICULAR TIME for (var j=0; j<=numberQuestions; j++) { if (divideAnswer[0] == "q" + j) { var responseUl= document.getElementById('responseUl' + j); responseUl.innerHTML += "<li>" + divideAnswer[1] + "</li>"; } } //divideAnswer[0] is the question number and divideAnswer[1] is the actual answer //Flag how many of each question there are for (var j=0; j<numberQuestions; j++) { numberFlag[j] = 0; //numberFlag[j] = 0; if (divideAnswer[0]=="q"+ j){ console.log("I match"); numberFlag[j] ++; // this returns a number but above returns NaN???? ---> numberFlag[2]=1; } console.log("There are this many answers for number one:" + numberFlag[j]); } } } else if (xhr.status == 404) { console.log("Oops, file not found!"); } } } window.onload = function() { var anchor = document.getElementsByTagName('a'); anchor[0].addEventListener('click', function(e) { e.preventDefault(); sendRequest(this.href); }, false); } //if this.id= then look for questions that start with "q" + this.id +"*" Link to comment Share on other sites More sharing options...
thescientist Posted February 4, 2012 Share Posted February 4, 2012 var allAnswers = xhr.responseText.split('\n');var numberQuestions = 8; //loop through the questionsfor(var i = 1; i <= 8; i++){ //define a variable to map question to answers var question = 'q' + i; var answersPerQuestion = 0; console.log('QUESTION => ' + question); //loop through the answers, and split on the * for(var j = 0; j < allAnswers.length; j++){ var line = allAnswers[j]; var pieces = line.split('*'); console.log('LINE -> ' + line); console.log('line question => ' + pieces[0]); console.log('line answer => ' + pieces[1]); //determine if the current line contains //an answer for our question if(pieces[0] == question){ //increment our number of answers for this question answersPerQuestion++; //add the answer under the appropriate question in the DOM var output = document.getElementById('responseUl' + i); output.innerHTML += "<li>" + pieces[1] + "</li>"; }; }; console.log('Number of answers for question #' + i + ' => ' + answersPerQuestion);}; Link to comment Share on other sites More sharing options...
thescientist Posted February 4, 2012 Share Posted February 4, 2012 i didn't test it, but it should be fairly easy to fix any bugs. it's pretty straighforward. Link to comment Share on other sites More sharing options...
Caitlin-havener Posted February 4, 2012 Author Share Posted February 4, 2012 pseudocode var numberQuestions = 8;var numberOfQuestions= new Array(); //preload functionfunction init(){var anchor = document.getElementsByTagName('a');//set up flag for how many times a given anchor is clicked for (i=1; i<=numberQuestions; i++){anchor[i].addEventListener('click', function(e) {e.preventDefault();getAnswers(this.name);}, false); //OWEN IM HAVING THE SAME PROBLEM HERE WHERE I WANT TO USE THE ELEMENTS OF AN ARRAY AS INDIVIDUAL COUNTERS FOR EACH QUESTION... will this work?var clickCounter= newArray(); //flag to count how many times a given link is clickedclickCounter[i] = 0;}//httprequest number of questions for each question var xhr = new XMLHttpRequest(); if (xhr) {xhr.onreadystatechange = function() { displayResponse(xhr);}xhr.open("GET", "answers.txt", true);xhr.send(null);} function displayResponse(xhr) {if (xhr.readyState == 4) {if (xhr.status == 200 || xhr.status == 304) { var allAnswers = xhr.responseText.split('\n');var numberQuestions = 8; //loop through the questionsfor(var i = 1; i <= 8; i++){ //define a variable to map question to answers var question = 'q' + i; var answersPerQuestion = 0; console.log('QUESTION => ' + question); //loop through the answers, and split on the * for(var j = 0; j < allAnswers.length; j++) {var line = allAnswers[j];var pieces = line.split('*'); //determine if the current line contains an answer for our questionif(pieces[0] == question){ //increment our number of answers for this question answersPerQuestion++; }; }; console.log('Number of answers for question #' + i + ' => ' + answersPerQuestion); numberOfQuestions[i] = answersPerQuestion; //put numbers in seperate corresponding question variables //place number in the DOM for name==questionVariable numberIntoAnchor=document.createElement(toString(numberOfQuestions[i])); getAnchors=document.getElementsByName(i)[0];getAnchors.appendChild(numberIntoAnchor);}; }else if (xhr.status == 404) {console.log("Oops, file not found!");}}} } window.onload = init; //where to place this? //PAGE NOW HAS LOADED WITH NUMBER OF QUESTIONS LINK NEXT TO EACH QUESTION //WHEN USER CLICKS QUESTION NUMBER FUNCTION IS CALLED W/ ANCHOR NAME AS PARAMETERfunction getAnswers(name){var nameInt = parseInt(name);//comes in as string so parseclickCounter[nameInt]++; if (nameInt % 2 != 0)//IF clickCounter[parseInt(name)] is NOT divisible by two, which means it was clicked once or third time back on { }//httprequest split questions into pieces//filter looking for name to match pieces[0]//when they match, output pieces[1] to Ul.name} Link to comment Share on other sites More sharing options...
Caitlin-havener Posted February 4, 2012 Author Share Posted February 4, 2012 var numberQuestions = 8;var numberOfQuestions= new Array();//preload functionfunction init(){var anchor = document.getElementsByTagName('a');//set up flag for how many times a given anchor is clickedfor (i=1; i<=numberQuestions; i++){ anchor[i].addEventListener('click', function(e) { e.preventDefault(); getAnswers(this.name); }, false); //OWEN IM HAVING THE SAME PROBLEM HERE WHERE I WANT TO USE THE ELEMENTS OF AN ARRAY AS INDIVIDUAL COUNTERS FOR EACH QUESTION... will this work? var clickCounter= newArray(); //flag to count how many times a given link is clicked clickCounter[i] = 0;}//httprequest number of questions for each questionvar xhr = new XMLHttpRequest();if (xhr){ xhr.onreadystatechange = function() { displayResponse(xhr); } xhr.open("GET", "answers.txt", true); xhr.send(null);} function displayResponse(xhr){ if (xhr.readyState == 4) { if (xhr.status == 200 || xhr.status == 304) { var allAnswers = xhr.responseText.split('\n'); //loop through the questions for(var i = 1; i <= 8; i++){ //define a variable to map question to answers var question = 'q' + i; var answersPerQuestion = 0; console.log('QUESTION => ' + question); //loop through the answers, and split on the * for(var j = 0; j < allAnswers.length; j++) { var line = allAnswers[j]; var pieces = line.split('*'); //determine if the current line contains an answer for our question if(pieces[0] == question) { //increment our number of answers for this question answersPerQuestion++; }; }; console.log('Number of answers for question #' + i + ' => ' + answersPerQuestion); numberOfQuestions[i] = answersPerQuestion; //put numbers in seperate corresponding question variables //place number in the DOM for name==questionVariable numberIntoAnchor=document.createElement(toString(numberOfQuestions[i])); getAnchors=document.getElementsByName(i)[0]; getAnchors.appendChild(numberIntoAnchor); }; } else if (xhr.status == 404) { console.log("Oops, file not found!"); } }} }window.onload = init; //where to place this?//PAGE NOW HAS LOADED WITH NUMBER OF QUESTIONS LINK NEXT TO EACH QUESTION//WHEN USER CLICKS QUESTION NUMBER FUNCTION IS CALLED W/ ANCHOR NAME AS PARAMETERfunction getAnswers(name){var nameInt = parseInt(name);//comes in as string so parseclickCounter[nameInt]++;if (nameInt % 2 != 0)//IF clickCounter[parseInt(name)] is NOT divisible by two, which means it was clicked once or third time back on{//httprequest split questions into pieces//filter looking for name to match pieces[0]//when they match, output pieces[1] to Ul.name var xhr = new XMLHttpRequest(); if (xhr) { xhr.onreadystatechange = function() { displayResponse(xhr); } xhr.open("GET", fileName, true); xhr.send(null); } function displayResponse(xhr) { if (xhr.readyState == 4) { if (xhr.status == 200 || xhr.status == 304) { var allAnswers = xhr.responseText.split('\n'); //loop through the questions for(var i = 1; i <= 8; i++) { //loop through the answers, and split on the * for(var j = 0; j < allAnswers.length; j++) { var line = allAnswers[j]; var pieces = line.split('*'); //determine if the current line contains //an answer for our question if(pieces[0] == question) { //add the answer under the appropriate question in the DOM var output = document.getElementById(nameInt); //is nameInt what we use?? output.innerHTML += "<li>" + pieces[1] + "</li>"; }; }; }; } else if (xhr.status == 404) { console.log("Oops, file not found!"); } } }}else if (nameInt % 2 == 0){ //take the answers to each question off the page} } Link to comment Share on other sites More sharing options...
thescientist Posted February 4, 2012 Share Posted February 4, 2012 <!DOCTYPE html><head> <meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8"> <title>DIG4503 - Caitlin Havener - Assignment 1</title> <style> h2{ cursor: pointer; } li{ color: green; } </style> <script> var makeRequest = function(questionNumber){ console.log('ENTER makeRequest for question => ' + questionNumber); var xhr = new XMLHttpRequest(); if (xhr){ xhr.onreadystatechange = function(){ if(this.readyState === 4 && this.status === 200){ console.log('SUCCESS RESPONSE => ' + this.responseText); showAnswers(questionNumber, this.responseText.split('\n')); }; }; }; xhr.open("GET", "answers.txt", true); xhr.send(null); }; var getAnswers = function(questionNumber){ console.log('ENTER getAnswers for question => ' + questionNumber); makeRequest(questionNumber); }; var showAnswers = function(questionNumber, allAnswers){ console.log('ENTER showAnswers for question => ' + questionNumber); console.log(allAnswers); //loop through the answers, and split on the * for(var i = 0, l = allAnswers.length; i < l; i++){ var line = allAnswers[i]; var pieces = line.split('*'); console.log('LINE -> ' + line); console.log('line question => ' + pieces[0]); console.log('line answer => ' + pieces[1]); //determine if the current line contains //an answer for our question if(pieces[0] == ('q' + questionNumber)){ //output the answer to the appropriate question var output = document.getElementById('responseUl' + questionNumber); output.innerHTML += "<li>" + pieces[1] + "</li>"; }; }; }; var init = function(){ console.log('ENTER init'); //get all answer links var answerLinks = document.getElementsByTagName('h2'); //loop through these links for(var i = 0, l = answerLinks.length; i < l; i++){ var link = answerLinks[i]; //assign an onlick listener to call a function //make request, get answers, and show //using closure to preserve the value of i link.addEventListener('click', function(questionNumber){ console.log('ENTER link.click for question => ' + questionNumber); return function(){ getAnswers(questionNumber); }; }(i+1), true); }; }; window.onload = init; </script></head><body> <h1>Q + Ajax</h1> <h2>What school do I go to?</h2> <ul id="responseUl1"></ul> <h2>What am I studying?</h2> <ul id="responseUl2"></ul> <h2>What is my son's name?</h2> <ul id="responseUl3"></ul> <h2>What colors have been in my hair?</h2> <ul id="responseUl4"></ul> <h2>What kind of operating system is on my phone?</h2> <ul id="responseUl5"></ul> <h2>What kinds of soda do I like?</h2> <ul id="responseUl6"></ul> <h2>What are my favorite types of food?</h2> <ul id="responseUl7"></ul> <h2>What foreign country have I been to?</h2> <ul id="responseUl8"></ul></body></html> Link to comment Share on other sites More sharing options...
thescientist Posted February 4, 2012 Share Posted February 4, 2012 there is a known issue where the answers will keep showing once they are clicked after the first time. I'll leave that one up to you. You could create an array (say hasBeenAnswered) for each question during the loop, and set the index to false, and then true on click. Then have the event listener only call the getAnswers function if the question hasn't already been clicked, by checking against that value in the array. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 4, 2012 Share Posted February 4, 2012 Could just determine how many child 'li' tags there are, if zero allow output, if more than zero disallow output var child_li_total = output.getElementsByTagName("li").length; if(child_li_total <=0) { output.innerHTML += "<li>" + pieces[1] + "</li>"; } Link to comment Share on other sites More sharing options...
thescientist Posted February 5, 2012 Share Posted February 5, 2012 Could just determine how many child 'li' tags there are, if zero allow output, if more than zero disallow output var child_li_total = output.getElementsByTagName("li").length; if(child_li_total <=0) { output.innerHTML += "<li>" + pieces[1] + "</li>"; } but some questions have more than one answer. So wouldn't that prevent the extra answers from showing up? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 5, 2012 Share Posted February 5, 2012 Well then all you would have to do is compare number of answers to the number of li elements <!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>DIG4503 - Caitlin Havener - Assignment 1</title> <style> h2{ cursor: pointer; } li{ color: green; } </style> <script> var makeRequest = function(questionNumber){ console.log('ENTER makeRequest for question => ' + questionNumber); var xhr = new XMLHttpRequest(); if (xhr){ xhr.onreadystatechange = function(){ if(this.readyState === 4 && this.status === 200){ console.log('SUCCESS RESPONSE => ' + this.responseText); showAnswers(questionNumber, this.responseText.split('\n')); }; }; }; xhr.open("GET", "answers.txt", true); xhr.send(null); }; var getAnswers = function(questionNumber){ console.log('ENTER getAnswers for question => ' + questionNumber); makeRequest(questionNumber); }; var showAnswers = function(questionNumber, allAnswers){ console.log('ENTER showAnswers for question => ' + questionNumber); console.log(allAnswers);var totalanswers =0; ///////////////////////////////////////////////////////////////////////////////////////////// added by dsonesuk //loop through the answers, and split on the * for(var i = 0, l = allAnswers.length; i < l; i++){ var line = allAnswers[i]; var pieces = line.split('*'); console.log('LINE -> ' + line); console.log('line question => ' + pieces[0]); console.log('line answer => ' + pieces[1]); //determine if the current line contains //an answer for our question if(pieces[0] == ('q' + questionNumber)){ totalanswers++; ///////////////////////////////////////////////////////////////////////////////////////////// added by dsonesuk //output the answer to the appropriate question var output = document.getElementById('responseUl' + questionNumber); var child_li_total = output.getElementsByTagName("li").length; ///////////////////////////////////////////////////////////////////////////////////////////// added by dsonesuk if(child_li_total <totalanswers)///////////////////////////////////////////////////////////////////////////////////////////// added by dsonesuk {///////////////////////////////////////////////////////////////////////////////////////////// added by dsonesuk output.innerHTML += "<li>" + pieces[1] + "</li>"; }///////////////////////////////////////////////////////////////////////////////////////////// added by dsonesuk }; }; }; var init = function(){ console.log('ENTER init'); //get all answer links var answerLinks = document.getElementsByTagName('h2'); //loop through these links for(var i = 0, l = answerLinks.length; i < l; i++){ var link = answerLinks[i]; //assign an onlick listener to call a function //make request, get answers, and show //using closure to preserve the value of i link.addEventListener('click', function(questionNumber){ console.log('ENTER link.click for question => ' + questionNumber); return function(){ getAnswers(questionNumber); }; }(i+1), true); }; }; window.onload = init; </script></head><body> <h1>Q + Ajax</h1> <h2>What school do I go to?</h2> <ul id="responseUl1"></ul> <h2>What am I studying?</h2> <ul id="responseUl2"></ul> <h2>What is my son's name?</h2> <ul id="responseUl3"></ul> <h2>What colors have been in my hair?</h2> <ul id="responseUl4"></ul> <h2>What kind of operating system is on my phone?</h2> <ul id="responseUl5"></ul> <h2>What kinds of soda do I like?</h2> <ul id="responseUl6"></ul> <h2>What are my favorite types of food?</h2> <ul id="responseUl7"></ul> <h2>What foreign country have I been to?</h2> <ul id="responseUl8"></ul></body></html> Link to comment Share on other sites More sharing options...
thescientist Posted February 5, 2012 Share Posted February 5, 2012 it seems like it would be easier to set a mapped (in an array) flag variable for every question, and when the answers have been output the first time, set it to true. Initialize it to false and check for that before calling the getAnswers function. Or at least that would be my implementation of something like that. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 5, 2012 Share Posted February 5, 2012 Am I missing something here? sorry, why go through creating a array,and flagging it true false as you say seems pointless, when you have a simple solution of counting the answers and comparing it to the number of li elements to those exact number of answers. i could understand if you wanted the other answers, shown one at a time for some reason, but as far as i can work out, ALL the answers will show all at once. Link to comment Share on other sites More sharing options...
thescientist Posted February 5, 2012 Share Posted February 5, 2012 because to me its a simple case of something either being true or false. the answers have been shown or they haven't. why bother adding more counters and conditionals. You've seen the answers, so "shown" would be true. you haven't seen the answers, so shown would be false It's not like it takes an excessive amount of code to write. initialize an array, on the init loop set the current index to false, and check the flag in show answers. if we can show answers, do it. if we can't don't. <!DOCTYPE html><head> <meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8"> <title>DIG4503 - Caitlin Havener - Assignment 1</title> <style> h2{ cursor: pointer; } li{ color: green; } </style> <script> var makeRequest = function(questionNumber){ console.log('ENTER makeRequest for question => ' + questionNumber); var xhr = new XMLHttpRequest(); if (xhr){ xhr.onreadystatechange = function(){ if(this.readyState === 4 && this.status === 200){ console.log('SUCCESS RESPONSE => ' + this.responseText); showAnswers(questionNumber, this.responseText.split('\n')); }; }; }; xhr.open("GET", "answers.txt", true); xhr.send(null); }; var getAnswers = function(questionNumber){ console.log('ENTER getAnswers for question => ' + questionNumber); makeRequest(questionNumber); }; var showAnswers = function(questionNumber, allAnswers){ console.log('ENTER showAnswers for question => ' + questionNumber); console.log(allAnswers); var questionIndex = questionNumber - 1; //loop through the answers, and split on the * for(var i = 0, l = allAnswers.length; i < l; i++){ var line = allAnswers[i]; var pieces = line.split('*'); console.log('LINE -> ' + line); console.log('line question => ' + pieces[0]); console.log('line answer => ' + pieces[1]); //determine if the current line contains //an answer for our question //and only show if the answers havent already been shown if(pieces[0] == ('q' + questionNumber) && !answersShown[questionIndex]){ //output the answer to the appropriate question var output = document.getElementById('responseUl' + questionNumber); output.innerHTML += "<li>" + pieces[1] + "</li>"; }; }; answersShown[questionIndex] = true; //set the flag to true for future events }; var answersShown = []; //initialize an answersShown array var init = function(){ console.log('ENTER init'); //get all answer links var answerLinks = document.getElementsByTagName('h2'); //loop through these links for(var i = 0, l = answerLinks.length; i < l; i++){ var link = answerLinks[i]; answersShown[i] = false; //initliaze each index to false //assign an onlick listener to call a function //make request, get answers, and show //using closure to preserve the value of i link.addEventListener('click', function(questionNumber){ console.log('ENTER link.click for question => ' + questionNumber); return function(){ getAnswers(questionNumber); }; }(i+1), true); }; }; window.onload = init; </script></head> <body> <h1>Q + Ajax</h1> <h2>What school do I go to?</h2> <ul id="responseUl1"></ul> <h2>What am I studying?</h2> <ul id="responseUl2"></ul> <h2>What is my son's name?</h2> <ul id="responseUl3"></ul> <h2>What colors have been in my hair?</h2> <ul id="responseUl4"></ul> <h2>What kind of operating system is on my phone?</h2> <ul id="responseUl5"></ul> <h2>What kinds of soda do I like?</h2> <ul id="responseUl6"></ul> <h2>What are my favorite types of food?</h2> <ul id="responseUl7"></ul> <h2>What foreign country have I been to?</h2> <ul id="responseUl8"></ul> </body></html> To me the intent of code is a lot clearer if your just testing against a boolean value, which is half the reason I would do it anyway. I'm not saying your way is wrong, this is just my preference/style of writing code. edit: Also, you get the advantage of being able to cache this information locally, without having to reach out to the DOM everytime to check the <li>', since currently the assignment requires that the AJAX request be made everytime to fetch the answers. Link to comment Share on other sites More sharing options...
Caitlin-havener Posted February 6, 2012 Author Share Posted February 6, 2012 You guys are so funny! LOL working on it this morning. Need to get it done today! MEHH Link to comment Share on other sites More sharing options...
amitamberker Posted February 6, 2012 Share Posted February 6, 2012 You guys are so funny! LOL working on it this morning. Need to get it done today! MEHH Hi Caitlin,And also, all those guys are genius as well! Hope you are doing well. Wishing you Good Luck! Link to comment Share on other sites More sharing options...
amitamberker Posted February 6, 2012 Share Posted February 6, 2012 Am I missing something here? sorry, why go through creating a array,and flagging it true false as you say seems pointless, when you have a simple solution of counting the answers and comparing it to the number of li elements to those exact number of answers. i could understand if you wanted the other answers, shown one at a time for some reason, but as far as i can work out, ALL the answers will show all at once. Hi dsonesuk, I am sorry if I have done something wrong to you. Still I have no idea why you have blocked me but I respect your choice. No worries. By the way I don’t have any hard feelings against. You have been so wonderful to me. Take care mate! Link to comment Share on other sites More sharing options...
dsonesuk Posted February 6, 2012 Share Posted February 6, 2012 Look mate! the way you keep bringing it up, time after time it looks very well that i made the right choice! and you will remain blocked. geees get over it! Link to comment Share on other sites More sharing options...
amitamberker Posted February 6, 2012 Share Posted February 6, 2012 Look mate! the way you keep bringing it up, time after time it looks very well that i made the right choice! and you will remain blocked. geees get over it! Hi dsonesuk,Gotch you mate. I am getting over it. By the way I was concerned about our connection and hence I kept bringing it up, time after time. But thanks for the clarification that you made the right choice. Absolutely no worries. Good Bye and Good Luck mate! Link to comment Share on other sites More sharing options...
Caitlin-havener Posted February 6, 2012 Author Share Posted February 6, 2012 YAYY I got everything to work. Thank you so much! I used my own code though and implemented some of your stuff. Mine of course isn't as pretty but I didn't understand everything in yours and I had been looking at mine for so long so I just stuck to most of it Link to comment Share on other sites More sharing options...
thescientist Posted February 6, 2012 Share Posted February 6, 2012 awesome, glad to hear you got it working. The most important part about programming is knowing what you're writing, and being able to say confidently what each line is doing. If you ever need elaboration or clarification on anything provided or exampled, feel free to ask and we can just chat about it too. If you feel like sharing your finished product, then that would be cool too. Link to comment Share on other sites More sharing options...
amitamberker Posted February 6, 2012 Share Posted February 6, 2012 YAYY I got everything to work. Thank you so much! I used my own code though and implemented some of your stuff. Mine of course isn't as pretty but I didn't understand everything in yours and I had been looking at mine for so long so I just stuck to most of it Hi Caitlin,That's Excellent! Good Job! I think maybe my Good Luck wishes worked for you Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.