Jump to content

[newbie] Trying to understand what is wrong w/ array changes


tytbone

Recommended Posts

I am experimenting with code in the Tryit Editor and JSFiddle, based on reading "Javascript Arrays" and some info I found online.

 

I'm trying to allow the code to recognize when "Kiwi" is added to the array, and allow the text "true" to appear. However, the code does not work.

 

It does work if MyFunction2 is searching for the nonexistance of "Kiwi", ie "!==" instead of "===".

 

Does the problem have something to do with JS not recognizing changes in real time (or whatever the appropriate term is)?

 

Anyway, help would be appreciated. Thanks in advance.

<!DOCTYPE html><html><body><p>The length property provides an easy way to append new elements to an array without using the push() method.</p><button onclick="myFunction()">Try it</button><button onclick="myFunction2()">See if it's true or not</button><p id="demo"></p><p id="boolean"></p><script>var fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits;function myFunction() {    fruits[fruits.length] = "Kiwi";    document.getElementById("demo").innerHTML = fruits;}function myFunction2() {for (index=0; index<fruits.length; ++index) {if (fruits[index].contains === "Kiwi") {document.getElementById("boolean").innerHTML = "true";}}}</script></body></html>

http://jsfiddle.net/nu2h4/

Link to comment
Share on other sites

I'm not aware of any JS array property/method that has .contains (maybe there is). However, try changing myFunction2 to:

function myFunction2() {    for (var index=0; index < fruits.length; ++index)     {        if (fruits[index] === "Kiwi")         {            document.getElementById("boolean").innerHTML = "true";        }    }}
  • Like 1
Link to comment
Share on other sites

Thanks, that worked!

 

If you find the time, could you help me out again? I'm having more trouble understanding what I'm doing wrong.

 

"boo" keeps coming up as "false" even though "Apple" is part of the array. The only index that comes up as "true" is "Mango". Can you or anyone else explain why this is, and what I am doing wrong? Maybe I missed something obvious.

<body><button onclick="myFunction()">Try it</button><p id="demo"></p><p id="boo"></p><script>var click = 0;var fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits;function myFunction() {    for (var index = 0; index < fruits.length; index++) {        if (fruits[index] === "Apple") {            document.getElementById("boo").innerHTML = "true";        } else {            document.getElementById("boo").innerHTML = "false";        }    }    document.getElementById("demo").innerHTML = fruits;}</script></body>
Link to comment
Share on other sites

Try...

function myFunction() {    for (var index = 0; index < fruits.length; index++) {        if (fruits[index] === "Apple") {            document.getElementById("boo").innerHTML += "true";        } else {            document.getElementById("boo").innerHTML += "false";        }    }    document.getElementById("demo").innerHTML = fruits;}
  • Like 1
Link to comment
Share on other sites

...

 

Thanks, that got me further by showing which index numbers were or were not apple - "falsefalsetruefalse".

 

However, what I was really going for was having the function check the entirety of the array and return "true" if it contains "Apple" at any index, or false if not anywhere in the array.

 

Using "indexOf" is also closer to what I want; it will compare an object to an index and will ring true or false depending on the index number.

function myFunction() {    for (var index = 0; index < fruits.length; index++) {        if (fruits.indexOf("Apple") == 5) {            document.getElementById("boo").innerHTML = "true";        } else {            document.getElementById("boo").innerHTML = "false";        }    }    document.getElementById("demo").innerHTML = fruits;}

Now I'd like to understand if I can just cycle through an array and have it write "true" if "Apple" is within the array.

 

Thanks again in advance. :)

 

EDIT: Okay, I can get myFunction to post "true" or blank. It appears the "false" line is causing it to mess up; if the "false" line is included everything returns "false" except the last item in the array (or so it seems).

function myFunction() {    for (var i = 0; i < fruits.length; i++) {        if (fruits[i] === "Orange") {            document.getElementById("boo").innerHTML = "true";        }        }}
function myFunction() {    for (var i = 0; i < fruits.length; i++) {        if (fruits[i] === "Apple") {            document.getElementById("boo").innerHTML = "true";        } else if (fruits[i] !== "Apple") {            document.getElementById("boo").innerHTML = "false";        }    }}
Edited by tytbone
Link to comment
Share on other sites

Try...

<script>var click = 0;var fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits;function myFunction() {var found = false;    for (var index = 0; index < fruits.length; index++) {        if (fruits[index] === "Apple") {          found = true;        }    }    document.getElementById("demo").innerHTML = fruits;    document.getElementById("boo").innerHTML = found;}</script>

...or...

<script>var click = 0;var fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits;function myFunction() {var found = false;if (fruits.indexOf("Apple") != -1){found = true;}}document.getElementById("demo").innerHTML = fruits;document.getElementById("boo").innerHTML = found;}</script>
  • Like 1
Link to comment
Share on other sites

 

Try...

<script>var fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits;function myFunction() {var found = false;    for (var index = 0; index < fruits.length; index++) {        if (fruits[index] === "Apple") {          found = true;        }    }    document.getElementById("demo").innerHTML = fruits;    document.getElementById("boo").innerHTML = found;}</script>

 

That worked, thanks! The placement of "document.getElementById("boo").innerHTML = found;" outside of the "if" statement must have been important (so it can change between true or false), as well as handling the "var" within the function.

Link to comment
Share on other sites

Arrays also come with an "every" function. what an "every" function does is that it takes a testing function that you give it and runs a test with it on each element in the array. the every function will then return true if every single element would return true with the testing function, and return false if at least one element would return false. So say that you want to test if the word Apple is in the array...

<body>  <button onclick="hasFruit('Apple')">Try it</button>  <p id="demo"></p>  <p id="boo"></p><body>
var fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits;  function hasFruit(item) {    //Notice that I'm testing for when the element is NOT the item (Apple)    // this is so that the testing function will return true for all elements except apple    function tester(e){//e is the element that the Every function will pass automatically      return (e !== item);    }        //When the Every function loops through the elements with the tester function it'll see    // [true, true, false, true]. Since there is at least one false in that array it'll return false    // then we simply use the ! operator to flip that to true.        document.getElementById("demo").innerHTML = fruits;    document.getElementById("boo").innerHTML = !fruits.every(tester);  }
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...