JavaScript：使用URL作为变量将onClick添加到Div

Question

The code below makes a Div for every object it finds in an array. It then adds a header, a paragraph, an image, and an anchor.

The div's actually look like rectangles on top of one another. What I would like to do is add an onclick attribute to the divs based on the keys within my objects ( coffeShops[i].menu). When I do so though, clicking just doesn't do anything and i get this error message in console

"Uncaught TypeError: Cannot read property 'menu' of undefined"

This only happens when I try window.open with the object key coffeShops[i].menu. If I swap that out with " http://www.google.com " it works just fine. Also, the links from that variable show up in the console just fine. So I know it's getting the data from the object just fine. But for some reason it doesn't want to open from the div.

FYI I'm extremely new to this so apologies if the explanation doesn't make sense.

    var containerDiv = document.getElementById("container");
    console.log(containerDiv);


   for (var i = 0; i < coffeeShops.length; i++){

      var launchMenu = function(){
        window.open(coffeeShops[i].menu);
      }

      console.log(coffeeShops[i].menu);

        var coffeeShopDiv = document.createElement("div");
        coffeeShopDiv.className = "coffeeShop";
        coffeeShopDiv.onclick = launchMenu;
        containerDiv.appendChild(coffeeShopDiv);

        var coffeeShopImage = document.createElement("img");
        coffeeShopImage.src = coffeeShops[i].image;
        coffeeShopImage.className = "coffeeImage";
        coffeeShopDiv.appendChild(coffeeShopImage);

        var coffeeShopHeader = document.createElement("h1");
        coffeeShopHeader.className = "coffeeHeader"
        coffeeShopHeader.innerHTML = coffeeShops[i].name;
        coffeeShopDiv.appendChild(coffeeShopHeader);

        var coffeeShopPar = document.createElement("p");
        coffeeShopPar.className = "coffeeDescription"
        coffeeShopPar.innerHTML = coffeeShops[i].description;
        coffeeShopDiv.appendChild(coffeeShopPar);

        var coffeeMenu = document.createElement("a");
        coffeeMenu.href = coffeeShops[i].menu;
        coffeeMenu.innerHTML = "MENU"
        coffeeShopDiv.appendChild(coffeeMenu);



    };

Answer 1

EDITED: in light of comment

It looks like you need to separate the function which opens the new window from the code which generates page items. By slightly restructuring your code this can be achieved by using the element.addEventListener() method.

/* place the 'launchMenu' outside of 
   the for-loop so it can be accessed
   by each of the target elements */

function launchMenu(event){
    /* get the class attribte of
       the clicked element */
    var clickedClass = event.target.className;
    var targetElement,
        link;
    /* is the clicked element the containing div? */
    if (clickClass !== 'coffeeShop') {
       /* nope */
       targetElement = event.target.parentNode;
    } else {
       /* yep */
       targetElement = event.target;
    }
    /* get 'data-url' of target */
    link = targetElement.getAttribute('data-url');
    /* open the new window */
    window.open(link);
}

/* elsewhere: create elements as before */
for (var i = 0; i < coffeeShops.length; i++){
    var coffeeShopDiv = document.createElement("div");
    coffeeShopDiv.className = "coffeeShop";
    /* add 'data-' attribute to target div */
    coffeeShopDiv.setAttribute('data-url', coffeeShops[i].menu);
    containerDiv.appendChild(coffeeShopDiv);

    var coffeeShopImage = document.createElement("img");
    coffeeShopImage.src = coffeeShops[i].image;
    coffeeShopImage.className = "coffeeImage";
    coffeeShopDiv.appendChild(coffeeShopImage);

    var coffeeShopHeader = document.createElement("h1");
    coffeeShopHeader.className = "coffeeHeader"
    coffeeShopHeader.innerHTML = coffeeShops[i].name;
    coffeeShopDiv.appendChild(coffeeShopHeader);

    var coffeeShopPar = document.createElement("p");
    coffeeShopPar.className = "coffeeDescription"
    coffeeShopPar.innerHTML = coffeeShops[i].description;
    coffeeShopDiv.appendChild(coffeeShopPar);

    var coffeeMenu = document.createElement("a");
    coffeeMenu.className = 'coffeeMenu';
    coffeeMenu.innerHTML = "MENU"
    coffeeShopDiv.appendChild(coffeeMenu);

    /* attach an eventListener to each
       created '.coffeeShopDiv' element */
    coffeeMenu.addEventListener(
        'click', launchMenu, false
    );   
};

The target element ( coffeeShopDiv ) now contains a url-reference in its 'data-url' attriubte and has an event listener assigned.

When the target element, or any of her child elements, are clicked the launchMenu() function will be invoked. This function checks which element was clicked by comparing the className attribute to the class name of 'coffeeShopDiv' - such that if the class name of the clicked element is not 'coffeeShop' the targetElement variable is assigned to the clicked elements parent Node (that is, 'coffeShopDiv').

The 'data-url' reference is obtained and used in window.open() .

Also see:

• Using data-* attributes
• Event.target
• Quriksmode: Introduction to Events
• This StackOverflow answer about using window.open()