Question

我创建了一个像这样的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（）中，我在<p>标签内创建了id运行时，在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);
    }

但是将价值视为未定义。任何帮助都会很棒。

Answer 1

尝试onclick = itemclicked(this.id)而不是onclick = 'itemclicked(id)'

Answer 2

您只能传递var i并在此之后搜索ID：

你的p构造函数dymanic只传递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);
    }

是你想要的吗？

Answer 3

我不确定但是不应该用双引号包装onclick函数：

你有这个

onclick = itemclicked(id)>'

它应该是这个

onclick = "itemclicked(id)">'

您必须修改itemclicked函数以检索p元素的“值”。

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 );
}

demo here

Answer 4

老兄，你应该真的为你做CodingStyle。另外，编写简单，干净的代码。

首先，html代码应该如下所示：

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

没有div或类似的东西。 ul和ol只能与li结合使用。此外，您应该始终按正确的顺序关闭html标记。否则，就像在你的考试中一样，你有不同的开始和结束标签。（你的html示例第5行中的结束div没有引用开头的div-tag）......

这是固定代码：

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

您可以在此fiddle中观看工作示例。

问题是：

您必须使用已提及的@Varada this.id提交所点击项目的ID。
在此之前，您必须构建一个工作ID，使用.toString()
你真的写了一些乱码。应该得到的结果不是一个列表，它是包含在div标签内的各种ul容器。哦，我的。

0

==

===

here

BTW ++：我不知道你想在value - 函数中读到的itemClicked()。我没有测试它是否会读取innerHTML但通常情况下，您只能读取之前写入信息的信息。在此示例中，我猜value应为空。

希望我没有忘记任何事情。您可以看到，该代码现在正常工作。如果您还有其他问题，请询问。

干杯！

如何获取innerHTML的id值？

4 个答案: