-2

This is my HTML file structure:

var li = document.getElementById("myList").getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
    li.onclick = function () {
        alert(document.getElementsByClassName("title")[i].innerHTML);
    }
}
<div class="maincontent">
    <ul id="myList">
        <li>
            <div class="image">
                <img src="http://lorempixel.com/100/100/">
                <div class="button option-vertical-grid"></div>
            </div>
            <div class="info">
                <div class="url">lorempixel.com</div>
                <div class="title" id="title">M1</div>
                <div class="play"><section>0</section></div>
            </div>
            <div class="info2">
                <div class="date">30.11.2016</div>
                <div class="button option-vertical"></div>
            </div>
        </li>
        <li>
            <div class="image">
                <img src="http://lorempixel.com/102/100/">
                <div class="button option-vertical-grid"></div>
            </div>
            <div class="info">
                <div class="url">lorempixel.com</div>
                <div class="title">M2</div>
                <div class="play"><section>0</section></div>
            </div>
            <div class="info2">
                <div class="date">30.11.2016</div>
                <div class="button option-vertical"></div>
            </div>
        </li>
        <li>
            <div class="image">
                <img src="http://lorempixel.com/103/100/">
                <div class="button option-vertical-grid"></div>
            </div>
            <div class="info">
                <div class="url">lorempixel.com</div>
                <div class="title">M3</div>
                <div class="play"><section>0</section></div>
            </div>
            <div class="info2">
                <div class="date">30.11.2016</div>
                <div class="button option-vertical"></div>
            </div>
        </li>
    </ul>
</div>

The first task is: On click of the list it should show an alert message with the title of the clicked list, i.e. the text in the div class "title", i.e. (M1 or M2....)

The second task is: On click of the div class "button option-vertical" it should give me another alert containing the class title as in task above and additionally the img src value from the div class "image", for example: (http://lorempixel.com/100/100)

When showing the alert from the second task, the alert from the first task should not be shown and vice versa. Please all without jQuery, only JavaScript.

With the JavaScript I tried above, a click on the list item doesn't give me any alert message.

Makyen
  • 31,849
  • 12
  • 86
  • 121
Schopenhauer
  • 25
  • 5
  • Please read [How do I ask a good question?](http://stackoverflow.com/help/how-to-ask) before attempting to ask more questions. This is basically a requirements dump with some code snippet that is incomplete and does not really try and solve the requirements, *doesn't work* is also useless, because it also *doesn't actually try and do what you want*. –  May 12 '17 at 19:28
  • Please read [Why is “Doesn't work, can someone help me?” not an actual question?](https://meta.stackoverflow.com/questions/284236/why-is-can-someone-help-me-not-an-actual-question) before attempting to ask more questions. –  May 12 '17 at 19:29
  • It doesn't work refers to the tasks I explained above. But thank you for your suggestion. – Schopenhauer May 12 '17 at 19:38
  • yeah *doesn't work* is useless unless you detail *how does it not work* otherwise there is no *problem statement*. **The relevant close reason:** *Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, **a specific problem or error** and the **shortest code necessary to reproduce it in the question itself**. Questions without a clear problem statement are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example.](http://stackoverflow.com/help/mcve)*. You are missing the last two making this a requirements dump. –  May 12 '17 at 19:44
  • In addition to the issue mentioned in both answers, you are also experiencing a duplicate of [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/q/750486) – Makyen May 13 '17 at 22:40

1 Answers1

0

The getElementsByClassName()|getElementsByTagName method returns a collection of all elements in the document with the specified class|tag name, as a NodeList object.
The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.

var li = document.getElementById("myList").getElementsByTagName("li"),
    len = li.length,
    i;
for (i = 0; i < len; i += 1) {
    li[i].onclick = function() {
        //Li only has one child with class "title"
        alert(this.getElementsByClassName("title")[0].innerHTML);
    }
}
alessandrio
  • 4,282
  • 2
  • 29
  • 40