displaying a function in javascript/html

Question

Recently began learning Javascript on CodeAcademy and throughout the tutorials they use console.log(). However I heard I need to use .innerHTML instead when I'm just printing to a document so to practice this I wrote a small array and I want to write text using if/else statments with it. Sorry if my code is wrong, I'm pretty new to this but can someone explain how to implement the .innerHTML to this code?

Thanks in advance! (left the html in to show full layout).

function mylist(myArray) {
 var backPack = [
 gear = [
     'compass',
     'rope',
     'tent',
     ],
 food = [
     'granola',
     'oats',
     'fruit',
     ],
 clothes = [
     'shirt',
     'pants',
     'underwear',
     ]
 ];
  if (backPack.clothes !== 'socks') {
      document.getElementById('display').innerHTML = "don't froget your socks!";
  }else{
      document.getElementById('display').innerHTML = "All your clothes are here!";
  };
};
function check(){
   document.getElementById('display').innerHTML = mylist();
}

<p id='display'></p>

What exactly is the issue you are having? Your innerHTML looks fine. The only problem I see is the if statement is comparing an array backPack.clothes to a string socks. You would need to check if the array contains socks instead — Vincent Nguyen
– Vincent Nguyen, Commented May 16, 2018 at 13:47
No there are several things wrong here. backPack.clothes is not valid syntax either: backPack is an array and clothes is an element of an array, not a property of it. — glhrmv
– glhrmv, Commented May 16, 2018 at 13:52
@VincentNguyen Well what i'm trying to do is have the final displayed text show either "dont forget your socks" or "all your clothes are here" depending on if 'socks' are in the array or not. however i cant get anything to display so along with code error i figured i was using innerHTML wrong since ive had the issue with other attempts at it as well. — J D
– J D, Commented May 16, 2018 at 13:53
@glhrmv Yeah my bad didn't see that backpack was an array...been working with too much JSON recently lol — Vincent Nguyen
– Vincent Nguyen, Commented May 16, 2018 at 13:55
@glhrmv thanks for pointing that out. As far as changing the "backpack.clothes" to be a valid syntax to show if it contains socks or not, how would i go about that? — J D
– J D, Commented May 16, 2018 at 13:55

Muhammad Usman · Accepted Answer · 2018-05-16 13:53:33Z

3

backPack is an array in your case and there is no property like clothes on this object. As a result of backPack.clothes you get undefined.

From structure of your date you can directly access clothes and again, clothes is an array and you use .indexOf/.find/.some etc to check if array contains an entry like clothes.indexOf('socks') > -1 as condition to make sure socks are in array of clothes.

Also, you don't need to do

 document.getElementById('display').innerHTML = mylist();

This would only be true if mylist() is returning something that you want to add as innerHTML of the element.

Your mylist function is already doing that. i-e, it is already writing the results in html of the element display

function mylist(myArray) {
         var backPack = [
             gear = [
                 'compass',
                 'rope',
                 'tent',
                 ],
             food = [
                 'granola',
                 'oats',
                 'fruit',
                 ],
             clothes = [
                 'shirt',
                 'pants',
                 'underwear'
                 
                 ]
             ];
          if (!(clothes.indexOf('socks') > -1) ) {
              document.getElementById('display').innerHTML = "don't froget your socks!";
          }else{
              document.getElementById('display').innerHTML = "All your clothes are here!";
          };
       };
       function check(){
           document.getElementById('display').innerHTML = mylist();
       };
       
       mylist()

<!DOCTYPE html>
<html>
   <head>
   <body>
       <p id='display'></p>
 
   </body>
</html>

answered May 16, 2018 at 13:53

Muhammad Usman

10.1k26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Durga Over a year ago

backPack array looks weird. and all the value inside initialised.

Fabio Lolli Over a year ago

The syntax to declare that array is kind of confusing... Why are sub arrays assigned to gear, food and clothes variables? What is the scope of these variables, are they var or let? If OP is new to this, maybe it's better to explain/ask...

glhrmv · Accepted Answer · 2018-05-16 16:51:04Z

This should help you achieve what you're looking for. Some comments follow afterward.

<!DOCTYPE html>
<html>
   <head>
   <body>
       <p id='display'></p>
     <script>
         var backPack = {
             gear: [
                 'compass',
                 'rope',
                 'tent',
                 ],
             food: [
                 'granola',
                 'oats',
                 'fruit',
                 ],
             clothes: [
                 'shirt',
                 'pants',
                 'underwear',
                 ]
         };

          if (!backPack.clothes.includes('socks')) {
              document.getElementById('display').innerHTML = "don't froget your socks!";
          } else {
              document.getElementById('display').innerHTML = "All your clothes are here!";
          };
     </script>
   </body>
</html>

I removed your mylist function as it wasn't being called anywhere, so it would never run without you manually calling it at the bottom of your script. If you want to keep the mylist function, I'd advise you to define backPack outside of it, and pass it as a parameter.

I changed your backPack variable to be an Object instead. This makes more logical sense as a backpack is an object with several spaces (collections/lists) in it. Keeping it as an array is definitely possible but an added advantage of my change is that the syntax for accessing each compartment of the backpack is the very intuitive dot notation.

Finally, I used Array.includes to find the element you're looking for in the gear array (which itself is a property of backPack). This is more readable than Array.indexOf, in my opinion.

I think your if-condition should be flipped :) Not really technical, but it might be confusing for others.

Collectives™ on Stack Overflow

displaying a function in javascript/html

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related