JavaScript - окно PopUp с текстом при нажатии на элементы списка

Question

Я пытаюсь понять, чего мне не хватает со сценарием ниже. Моя цель состоит в том, чтобы иметь упорядоченный список (для каждого требования к назначению), когда появляется всплывающее окно с текстом при нажатии любого из элементов списка. Каждый элемент списка приведет к разному тексту.

Я знаю, что могут быть более эффективные способы сделать это, которые не входят в сферу моего понимания на данном этапе, поэтому я пытаюсь сделать следующее [нерабочее] обходное решение ниже.

Пример: Когда пользователь нажимает элемент «Один», появляется всплывающее окно с текстом внутри него с надписью «Пункт 1», но в результате я получаю «неопределенный». Какие-нибудь советы?

Мой тест HTML:

<ol id="javaList" onclick="popUp()"> 
    <li value="Item 1">One</li> 
    <li value="Item 2">Two</li> 
    <li value="Item 3">Three</li> 
</ol> 

JavaScript:

<script> 

    window.popUp = function() { 
     var myWindow = window.open("", "", "width=400, height=200"); 
     var ls = document.getElementsByTagName("li"); 
     myWindow.document.write(ls.value); 
    } 

</script> 

Answer 1

Есть несколько проблем в вашем коде.

Вам не нужно иметь ширину и высоту в кавычках, и вы можете захватить элемент с помощью the event argument из вашего обработчика onclick. Ваша window.popup функция должна быть:

<script> 
window.popUp = function(event) { 
    var myWindow = window.open("", "", 400, 200); 
    var ls = event.currentTarget; 
    myWindow.document.write(ls.value); 
} 
</script> 

Answer 2

Вы не можете получить value о качестве li он возвращается в любом случае 0. Вместо этого попробуйте изменить его на data-value.

Если вы включаете библиотеку jQuery, решение становится тривиальным. Ваш HTML станет:

<ol id="javaList"> 
    <li data-value="Item 1">One</li> 
    <li data-value="Item 2">Two</li> 
    <li data-value="Item 3">Three</li> 
</ol> 

И JavaScript стал бы:

$('li').on('click', function(event){ 
    var myWindow = window.open("", "", "width=400, height=200"); 
    myWindow.document.write($(this).data('value')); 
}