Javascript 动态生成的ID元素的getElementByID

我在获取从数据库获取的数据动态生成的项的ID元素的值时遇到问题。我有一个查询，从Items中选择ItemID、ItemName、itemagename。下面的代码将通过将ItemID的值连接到每个ID名称，为从数据库返回的所有行生成每个ID

for ($i=0; $i <$numrows; $i++) {
$stmt->fetch()

<div> <img class="itemImage" id="Image" .$ItemID src=/images/itemImage . $itemID> $ItemID </div>
<div id= "ItemID" .$ItemID> $ItemID </div>
<div id= "ItemName" .$ItemID> $ItemName" </div>

}

然后，我希望能够单击ID=Image002的图像，并希望通过getElementByIdItemID.innerHTML获取ItemID的值。我有以下代码：

var itemID = document.getElementById("ItemID").innerHTML;

$( ".itemImage" ).click(function() {
var itemID= document.getElementById("ItemID").innerHTML;
console.log(itemID);

但是，这将返回未定义的itemID。任何帮助都将不胜感激

getElementByIdItemID.innerHTML返回undefined，因为它是未定义的。正确的id是ItemID002。你需要知道它是什么

首先，更改PHP以创建如下HTML

<div id="ItemID002" onclick="clicked(002)" />

最后，在PHP创建时，需要通过将$ItemID更改为

编辑：另外，我想指出，在示例中的某些地方，在HTML中指定属性值时忘记使用引号。我建议你把它修好

---

祝你好运

或者，您可以仅通过javascript实现这一点。因此，您不需要更改标记或PHP。 这是一把提琴样品

关键部分是提取被点击元素的id部分：

var itemIdPart=e.target.id.substr5

确保检查e.target id等中的空值

---

我个人认为这个解决方案有点麻烦。但是你要求javascrit，你得到了它-

第一个代码示例是php吗？语法看起来有点离题。对我来说没有意义，为什么.itemID的前缀是句点？该循环正在输出多个具有相同id的元素。DOM中一次只能有一个给定id。@admcfajn这是PHP代码，PHP中的append运算符是句点，该代码应该创建类似Thank@Ben的内容，我知道。。。我只是不认为它是有效的，因为我认为concatenate操作符应该是prepend操作符。=从外观上看，它是在PHP之外使用的，这就是为什么我感到困惑。。。没有打开或关闭php标记或echo/print语句

        <div> <img class="itemImage" id=Image001 src="/images/Image001"> </div>
        <div id=ItemID001> 001 </div>
        <div id=ItemName001> SomeNameOfItem001" </div>

        <div> <img class="itemImage" id=Image002 src="/images/Image002"> </div>
        <div id=ItemID002> 002 </div>
        <div id=ItemName002> SomeNameOfItem002" </div>

        <div> <img class="itemImage" id=Image003 src="/images/Image003"> </div>
        <div id=ItemID003> 003 </div>
        <div id=ItemName003> SomeNameOfItem003"> </div>

        <script>
            $(document).ready(function () {
                $(".itemImage").click(function () {
                    var imgID = $(this).prop('id').replace("Image", "");
                    // you can directly use value imgID variable if its same. or you 
                    //can use from ItemID inner html
                    var yourValue = $("#ItemID" + imgID).html();
                    alert(yourValue);
                })
            });

        </script>

function clicked(id){
    var itemID= document.getElementById("ItemID"+id).innerHTML;
    console.log(itemID);
}

        <div> <img class="itemImage" id=Image001 src="/images/Image001"> </div>
        <div id=ItemID001> 001 </div>
        <div id=ItemName001> SomeNameOfItem001" </div>

        <div> <img class="itemImage" id=Image002 src="/images/Image002"> </div>
        <div id=ItemID002> 002 </div>
        <div id=ItemName002> SomeNameOfItem002" </div>

        <div> <img class="itemImage" id=Image003 src="/images/Image003"> </div>
        <div id=ItemID003> 003 </div>
        <div id=ItemName003> SomeNameOfItem003"> </div>

        <script>
            $(document).ready(function () {
                $(".itemImage").click(function () {
                    var imgID = $(this).prop('id').replace("Image", "");
                    // you can directly use value imgID variable if its same. or you 
                    //can use from ItemID inner html
                    var yourValue = $("#ItemID" + imgID).html();
                    alert(yourValue);
                })
            });

        </script>