JavaScript - PopUp Fenster mit Text beim Klicken auf Listenelemente

Question

Ich versuche herauszufinden, was ich vermisse mit dem Skript unten. Mein Ziel ist es, eine geordnete Liste (pro Zuweisungsanforderung) zu haben, in der ein Popup-Fenster mit Text erscheint, wenn auf eines der Listenelemente geklickt wird. Jeder Listeneintrag würde zu einem anderen Text führen.

Ich weiß, dass es möglicherweise effizientere Möglichkeiten gibt, dies zu tun, die außerhalb meines Verständnisses liegen, also versuche ich, die folgende [nicht arbeitende] Arbeitsumgebung unten zu machen.

Beispiel: Wenn der Benutzer auf den Listeneintrag "Eins" klickt, sollte ein Popup-Fenster mit dem darin enthaltenen Text "Item 1" erscheinen, aber ich bekomme als Ergebnis "undefined". Irgendwelche Tipps?

Mein Test 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> 

Das 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

ein paar Probleme in Ihrem Code Es gibt keine.

Sie müssen nicht die Breite und Höhe in Anführungszeichen haben, und Sie können das Element mit the event argument von Ihrem onclick-Handler erfassen. Ihre window.popup Funktion sollte sein:

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

Answer 2

Sie nicht die value ein li es 0 in jedem Fall zurück zu bekommen. Versuchen Sie stattdessen, es in data-value zu ändern.

Wenn Sie die jQuery-Bibliothek einschließen, wird die Lösung trivial. Ihre HTML würde:

<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> 

Und JavaScript würde:

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