はJavaScript - テキストを使用してポップアップウィンドウ私は、私は以下のスクリプトで欠けているかを把握しようとしている

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

問題のカップルがあなたのコードにあります。

あなたは引用符で幅と高さを持っている必要はありませんし、あなたのonclickハンドラからthe event argumentを持つ要素を取り込むことができます。あなたの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

あなたはそれがすべてのケースで0を返しliのvalueを取得することはできません。代わりに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')); 
}