1

I am trying to write an html page for class that uses a drop down menu to allow users to pull up a list of relevant information. Unfortunately I am having trouble figuring out how to make the script call on the information in the array. The jsfiddle has the full html section, any help would be GREATLY appreciated.

Please bear in mind that I am not very good with terminology, so be as specific as possible. Especially regarding jQuery, our teacher didn't go over it much so it's a freaking mystery to me.

Also, I do plan on adding more information to the objects in the array, but until I get it working, I don't want to waste the time on something I might need to restructure.

http://jsfiddle.net/GamerGorman20/nw8Ln6ha/11/

 var favWebComics = [
    Goblins = {1: "www.goblinscomic.org"},
    GirlGenious = {1: "www.girlgeniousonline.com"},
    GrrlPower = {1: "www.grrlpowercomic.com"}
    ];

    var myFunction = function() {
        var x = document.getElementById("mySelect").value;

        document.getElementById("demo").innerHTML = "You selected: " + x;
        document.getElementById("web").innerHTML = favWebComics.x;
    };

Again, the JSFiddle link has the full html, there are some unused items currently, but I do plan on adding more of them soon.

My next plan is to incorporate images into the objects, so a picture loads for each selection option. How would I manage that?

GoGoCharlie
  • 23
  • 3
  • Why do you have variable assignments inside your `favWebComics` array? – Barmar May 15 '15 at 00:33
  • I think you would benefit the most from reviewing the basic syntax and features of JavaScript through a tutorial: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide – Felix Kling May 15 '15 at 01:45

4 Answers4

1

[ ] is used for arrays, which are indexed with numbers. If you want named properties, you should use an object, which uses { } for its literals:

var favWebComics = {
    Goblins: "www.goblinscomic.org",
    GirlGenious: "www.girlgeniousonline.com",
    GrrlPower: "www.grrlpowercomic.com"
};

= is for assigning to variables, not specifying property names in an object.

Then you need to understand the difference between . and [] notation for accessing objects. .x means to look for a property literally named x, [x] means to use the value of x as the property name. See Dynamically access object property using variable.

So it should be:

document.getElementById("web").innerHTML = favWebComics[x];
Community
  • 1
  • 1
Barmar
  • 741,623
  • 53
  • 500
  • 612
0

your array is not structured correctly and an object would be better suited:

var favWebComics = {
    Goblins : "www.goblinscomic.org",
    GirlGenious : "www.girlgeniousonline.com",
    GrrlPower : "www.grrlpowercomic.com"
    };

then you should be able to access the properties as you intend

favWebComics.Goblins
favWebComics.GirlGenious
favWebComics.GrrlPower
deowk
  • 4,280
  • 1
  • 25
  • 34
0

Technically you were treating the array like a dictionary. if you're going to do that but still wanna add more information later you'll need to use brackets {} on the code. 

var favWebComics = {
   Goblins: ["www.goblinscomic.org"],
   GirlGenious: ["www.girlgeniousonline.com"],
   GrrlPower: ["www.grrlpowercomic.com"]
};

Also for javascript, as long as your searching key value stores, use braces [] for the call. Here's the working code below.

document.getElementById("web").innerHTML = favWebComics[x];
codykochmann
  • 347
  • 1
  • 10
  • Why do you need to put the URL in a list? – Alexandru Nedelcu May 15 '15 at 00:46
  • I put it in the list so it could be called the way they were trying to get to it. Based on the example they only wanted to use the output into the search. They also said they wanted to add more information later so I figured until we know for a fact that the other information isn't more links, a list was the proper answer. – codykochmann May 15 '15 at 00:50
  • So I have made a change, and with some quick searching I have found another way to make the image work. (I was doubling up "s) Here is the current form. http://jsfiddle.net/GamerGorman20/nw8Ln6ha/20/ Any advice on where to look for the random button? My plan was to create a button that would use onclick to activate a math randomizer. – GoGoCharlie May 16 '15 at 04:03
0

I have your solution, that displays:

  • the selected choice
  • the url
  • the images

Please check the fiddle. http://jsfiddle.net/nw8Ln6ha/13/

Your object would be:

var favWebComics = {
        Goblins :  {url:"www.goblinscomic.org", img:"img1"},
        GirlGenious : {url:"www.girlgeniousonline.com", img:"img2"},
        GrrlPower : {url:"www.grrlpowercomic.com", img:"img3"}
        };

Your display code:

document.getElementById("demo").innerHTML = "You selected: "+x+" "+ eval("favWebComics[\""+x+"\"].url")+" "+ eval("favWebComics[\""+x+"\"].img");
Alexandru Nedelcu
  • 267
  • 2
  • 12