function updateScreen() {
var textOutput = "";
setScreen("yellowScreen");
for (var i=0; i < finalColor.length; i++){
var newIndex = i+1;
textOutput = (((textOutput + newIndex +". NAME: " +finalName[i] + ", "
+ "scientific name is") + finalScientificName[i] + ", " + "this bird is
")+ finalConservationStatues[i] + "and they eat ")+ finalDiet[i]+"\n\n";
}
setText("yellowOutput", textOutput);
console.log(textOutput);
}
onEvent("yellowButton", "click", function( ) {
yellowFilter();
upDateScreen();
});
the function yellowFilter prevents anything else to run
function yellowFilter() {
for (var i = 0; color.length; i++) {
if (color[i] == 'Yellow' ) {
appendItem(finalColor, color[i]);
appendItem(finalDiet, diet[i]);
appendItem(finalConservationStatues, conservationStatus[i]);
appendItem(finalScientificName, scientificName[i]);
appendItem(finalName, Name[i]);
console.log(finalColor);
}
}
}
is there anything wrong with these functions the update screen function doesn't run if the yellowFilter runs but yellowFilter needs to run so that upDateScreen can run properly
Without actually going through anything I see one error immediately:
for (var i = 0; color.length; i++)
The second statement in a for loop needs to be a conditional
Related
I have a small for loop, but it is skipping even count , what am I missing ?
var i = 0;
function myLoop() {
setTimeout(function() {
//code below
console.log(Date() + ' and count is ' + i++);
//code above
if (i < 20) {
myLoop();
}
}, i++)
}
myLoop()
i++ is equal i = i + 1; But when you call console.log(i++), first thing wil be console.log with Old value, and after increment your value.
You raise the timeout with every iteration by on millisecond. Is that what you wanted?
https://www.w3schools.com/jsref/met_win_settimeout.asp
setTimeout(function, milliseconds, param1, param2, ...)
var i = 0;
function myLoop() {
setTimeout(function() {
//code below
console.log(Date() + ' and count is ' + i++);
//code above
if (i < 20) {
myLoop();
}
}, 1)
}
myLoop()
Your i++ in the console.log statement is modifying your i variable.
i++ is equal to i = i + 1.
Replace i++ with i, which will evaluate correctly as postfix increment will return the value before the modification which would just be i.
This works:
var i = 0;
function myLoop() {
setTimeout(function() {
//code below
console.log(Date() + ' and count is ' + i);
//code above
if (i < 20) {
myLoop();
}
}, i++)
}
myLoop()
Can also be done by adding another variable for the console.log
var i = 0;
var t = 0;
function myLoop() {
setTimeout(function() {
//code below
console.log(Date() + ' and count is ' + t++);
//code above
if (t < 20) {
myLoop();
}
}, i++)
}
myLoop()
You have i++ twice in your code. First you increment it when you call setTimeout at the bottom of your code and then you display the uneven value via console log and increment i. Change your logging to
console.log(Date() + ' and count is ' + i);
I am getting a TYPE: Mismatch error in IE8 with the following code.
function showTabs() {
for (var i = 0; i < tabs.length; i++) {
tabs[i].style.display = "inline-block";
if (tabs[i]) {
console.log(tabs[i] + " " + i);
}
}
}
function showThumbBoxes() {
for (var i = 0; i < thumbsContainers.length; i++) {
thumbsContainers[i].style.display = "block";
if (thumbsContainers[i]) {
console.log(thumbsContainers[i] + " " + i);
}
}
}
function loadImages() {
for (var i = 0; i < lazyImages.length; i++) {
if (lazyImages[i].getAttribute("data-src")) {
lazyImages[i].src = lazyImages[i].getAttribute("data-src");
if (lazyImages[i]) {
console.log(lazyImages[i] + " " + i);
}
}
}
}
function hideContainers() {
for (var i = 0; i < hiddenContainers.length; i++) {
hiddenContainers[i].style.display = "none";
if (hiddenContainers[i]) {
console.log(hiddenContainers[i] + " " + i);
}
}
}
function setUpPage() {
showTabs();
showThumbBoxes();
loadImages();
hideContainers();
}
if (window.addEventListener) {
window.addEventListener("load", setUpPage())
} else {
window.attachEvent("load", setUpPage()); <<< Here seems to be causing issues.
}
I have steppped through the code and it goes through everything correctly and everything gets loaded to the page. After I step through the last curly brace of setUpPage function, it is back on the attachEvent("load", setUpPage()); When I click step through again, I get the mismatch error. Not sure what is going on but because of the error the rest of my script will not load.
Anyone have an idea?
With attachEvent you need to add on + name of the event, so the event will be called onload
UPDATE
Also the second parameter of both of the event listeners, are callbacks, so they get executed when the event is triggered.
To be able to achieve that, you need to remove the parenthesis of the function call.
I actually want to update my previous question Javascript understanding return because the code below is quite similar to the previous one but since that question was answered already I decided to post this. The code of my previous questions works fine already but I want to satisfy some of my curiosities so I experimented the code and moved the return namePosition,
function positionIdentifier(name, nameArray) {
var namePosition;
for (i = 0; i < nameArray.length; i++) {
if (nameArray[i] == name) {
namePosition = function() {
alert("Your name is in position number " + (i + 1));
}
}
}
return namePosition;
}
name1Array = ["look", "sky", "walk", "kier"];
positionIdentifier("walk", name1Array)();
Why does it alert the wrong position (i+1)? Instead it alerts the final position which is the length of the array.
You forgot to use break statement here is correct code:
<script>
function positionIdentifier(name, nameArray) {
var namePosition;
for (i = 0; i < nameArray.length; i++) {
if (nameArray[i] == name) {
namePosition = function () {
alert("Your name is in position number " + (i + 1));
};
break;
}
}
return namePosition;
}
name1Array = ["look", "sky", "walk", "kier"];
positionIdentifier("walk", name1Array)();
</script>
That my friend is what is called a closure in javascript.
function() {
alert("Your name is in position number " + (i + 1));
}
When positionIdentifier function is invoked, i has the last value from the for loop.
To fix this you need to do this
function positionIdentifier(name, nameArray) {
var namePosition;
for (i = 0; i < nameArray.length; i++) {
if (nameArray[i] == name) {
/* now this will keep the correct value of i */
namePosition = (function(i) {
return function(){
alert("Your name is in position number " + (i + 1));
}
})(i)
/* now this will keep the correct value of i */
}
}
return namePosition;
}
Here is a working fiddle https://jsfiddle.net/uxyot51b/
I keep getting this error due to these two lines:
document.getElementById('button').innerHTML = '<p><button
onClick = "MultiAnswer('+ questions[output] + ',' + answer[output]
+');">Submit</button></p>';
And I can't figure out what I am missing .
Edit: Here is the surrounding code (Excuse the mess) Contains methods that uses a switch statement to determine the input for the arrays required, from there puts it into the parameters for DisplayQuestion which then passes it to the functions below from the behaviour wanted:
function MultiQuest(questions, choices, answer){
var output = Math.floor(Math.random() * (questions.length));
var choicesOut = [];
document.getElementById('question').innerHTML = '<p id = "Q1">' + questions[output] + '<p><br>';
for(var k = 0;k < choices[output].length; k++ ){
choicesOut.push('<p><input id = "choice'+[k]+'" type = "radio" name = "option" value="'+choices[output][k]+'">' + choices[output][k] + '<p>');
}
document.getElementById('answers').innerHTML = choicesOut.join("");
document.getElementById('button').innerHTML = '<p><button onClick = "MultiAnswer('+ questions[output] + ',' + answer[output] +');">Submit</button></p>';
document.getElementById('score').innerHTML = '<p>' + score + '<p>';
}
function MultiAnswer(questions, answer, pageType){
var currentQuestion = document.getElementById('Q1').textContent;
var number = multiQuestions(currentQuestion, questions);
var correctAnswer = answer[number];
var givenAnswer;
var options = document.getElementsByName('option');
var i
for(i = 0; i < options.length; i++){
if(options[i].checked){
givenAnswer = options[i].value;
}
}
if(givenAnswer == correctAnswer){
alert("Right Answer!");
score++;
} else {
alert("Wrong Answer!");
score = 0;
}
i = 0;
DisplayQuestion(pageType);
}
function multiQuestions(currentQuestion, whichArray){
for(var i = 0; i < multiquestions.length; i++){
if(currentQuestion == whichArray[i]){
return i;
}
}
return null;
}
You cannot have a function call like this:
MultiAnswer('+ questions[output] + ',' + answer[output]
+')
You will need to evaluate the parameter in a seperate variable and then pass it in the function.
So in your onClick call of multiAnswer you have wrapped the 3 inputs in quotes. After referencing your multiAnswer function you do have the 3 inputs that you are looking for. You also have + signs on the ends of those inputs. You do not need to concatenate the parens inside of the function call.
I hope this helps!
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
onClick = "MultiAnswer(questions[output] + ',' + answer[output]
)">Submit</button></p>';
Im wondering in the following code, how could I set the callback property "value" to null?
The code takes a bunch of ids (31, 32 ,33) and then uses a callback function to monitor changes to values of these ids. When I run the code again using the same IDs, is there a way to set the callback property to null?
obsids = new Array();
function list() {
if (arguments.length) {
leng = arguments.length;
for (i = 0; i < leng; i++) {
obsids[i] = new LiveAPI(callback, "id "+arguments[i]);
obsids[i].property = "value";
}
}
function callback(args) {
outlet(0, args[0] + " " + args[1] + " " + this.id);
}
}
You will need a specific callback for each obsids[i], and you need to create them in a closure for not loosing i.
function list() {
var obsids = [];
for (var i=0, len = arguments.length; i < len; i++)
obsids[i] = createApi("id "+arguments[i]);
function createApi(id) {
var obsid = new LiveAPI(function callback(args) {
obsid.property = null;
outlet(0, args[0] + " " + args[1] + " " + this.id);
}, id);
obsid.property = "value";
return obsid;
}
return obsids;
}