0

私はこのようなhtmlを作成しました。

<body onload = callAlert();loaded()>
<ul id="thelist">
<div id = "lst"></div>          
</ul>
</div>
</body>

callAlert（）はここにあります：

function callAlert()
    {
        listRows = prompt("how many list row you want??");
        var listText = "List Number";
                for(var i = 0;i < listRows; i++)
                {
                    if(i%2==0)
                    {
                        listText = listText +i+'<p style="background-color:#EEEEEE" id = "listNum' + i + '" onclick = itemclicked(id)>';
                    }                   
                    else
                    {
                        listText = listText + i+ '<p  id = "listNum' + i + '" onclick = itemclicked(id)>';
                    }                                   
                    listText = listText + i;

                    //document.getElementById("lst").innerHTML = listText+i+'5';
                }
                document.getElementById("lst").innerHTML = listText+i;
    }

callAlert（）内で、タグ内にid runtimeを作成<p>し、最後にforループで、このような段落を設定しました。document.getElementById("lst").innerHTML = listText+i;

listItemをクリックすると、選択したアイテムの値にアクセスする方法がわかりません。

私はこれを使用しています：

function itemclicked(id)
    {
        alert("clicked at :"+id);
        var pElement = document.getElementById(id).value;
        alert("value of this is: "+pElement);
    }

しかし、未定義として値を取得します。どんな助けでも素晴らしいでしょう。

4

4 に答える 4

2

onclick = itemclicked(this.id)代わりに試してくださいonclick = 'itemclicked(id)'

于 2012-11-12T09:33:04.370 に答える
1

次のように、varのみを渡してi、IDを検索できます。

渡すだけで動的なpコンストラクターi

<p  id = "listNum' + i + '" onclick = itemclicked(' + i + ')>

働き

function itemclicked(id)
    {
        id='listNum'+i;
        alert("clicked at :"+id);
        var pElement = document.getElementById(id).value;
        alert("value of this is: "+pElement);
    }

あなたが欲しいものは何ですか？

于 2012-11-12T09:31:17.900 に答える
1

よくわかりませんが、onclick関数を次のように二重引用符で囲むべきではありません。

あなたはこれを持っています

onclick = itemclicked(id)>'

そしてそれはこれでなければなりません

onclick = "itemclicked(id)">'

p要素の「値」を取得するには、itemclicked関数を変更する必要があります。

function itemclicked( id ) {

    alert( "clicked at :" + id );
    var el = document.getElementById( id );

    // depending on the browser one of these will work
    var pElement = el.contentText || el.innerText; 

    alert( "value of this is: " + pElement );
}

こちらのデモ

于 2012-11-12T09:55:07.427 に答える
1

おい、あなたは本当にあなたのCodingStyleに取り組むべきです。また、シンプルでクリーンなコードを記述します。

まず、htmlコードは次のようになります。

    <body onload="callAlert();loaded();">
        <ul id="thelist"></ul>
    </body>

divなどはありません。ulとのみol組み合わせて使用​​するものとしliます。また、常に正しい順序でhtmlタグを閉じる必要があります。それ以外の場合は、例のように、開始タグと終了タグの数が異なります。（htmlの5行目の終わりdiv-例は開始divタグを参照していません）...

そして、ここに固定コードがあります：

    <script type="text/javascript">
         function callAlert() {
            var rows = prompt('Please type in the number of required rows');
            var listCode = '';
            for (var i = 0; i < rows; i++) {
                var listID = 'list_' + i.toString();
                if (i % 2 === 0) {
                    listCode += '<li style="background-color:#EEEEEE" id="' + listID + '" onclick="itemClicked(this.id);">listItem# ' + i + '</li>';
                }
                else {
                    listCode += '<li id="' + listID + '" onclick="itemClicked(this.id);">listItem# ' + i + '</li>';
                }
            }
            document.getElementById('thelist').innerHTML = listCode;
        }

        function itemClicked(id) {
            var pElement = document.getElementById(id).innerHTML;
            alert("Clicked: " + id + '\nValue: ' + pElement);
        }
    </script>

このフィドルで動作するサンプルを見ることができます。

問題は次のとおりです。

  1. this.idすでに述べた@Varadaのように、クリックしたアイテムのIDをコミットする必要があります。
  2. その前に、作業IDを作成し、を使用して数値を文字列に解析する必要があります.toString()
  3. あなたは本当に厄介なコードを書いたのです。結果として想定されていたのはリストではなく、タグで囲まれたさまざまなdivコンテナulでした。ああ、私の。

ところで：sthかどうかを決してチェックしないでください。-operatorを0使用しています。==常に===-operatorを使用することをお勧めします。ここで問題について読んでください

valueところで++：関数で何を読みたいのかわかりませんitemClicked()。読み取れるかどうかはテストしていませんinnerHTMLが、一般的には、以前に情報が書き込まれた場所からしか情報を読み取ることができません。このサンプルでvalueは、​​空である必要があります。

私は何も忘れなかったと思います。ご覧のとおり、コードは現在機能しています。他にご不明な点がございましたら、お問い合わせください。

乾杯！

于 2012-11-12T13:22:07.497 に答える