javascript - getElementByID for Dynamically generated ID Elements - Stack Overflow

admin管理员组

文章数量:1403203

I am having an issue with getting the value of an ID element of the item that is dynamically generated from the data obtained from the database. I have a query SELECT ItemID, ItemName, ItemImageName FROM Items. Than I have the following code that will generate ID for each <div> for all rows returned from the database by concatenating the value of ItemID to each ID name.

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>

}

This should return a similar result to this for an item with ItemID=002:

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

Then I want to be able to click an image with an ID=Image002 and I want to get a value of ItemID with the getElementById("ItemID").innerHTML. I have the following code:

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

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

This however returns itemID as undefined. Any help would be greatly appreciated!

I am having an issue with getting the value of an ID element of the item that is dynamically generated from the data obtained from the database. I have a query SELECT ItemID, ItemName, ItemImageName FROM Items. Than I have the following code that will generate ID for each <div> for all rows returned from the database by concatenating the value of ItemID to each ID name.

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>

}

This should return a similar result to this for an item with ItemID=002:

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

Then I want to be able to click an image with an ID=Image002 and I want to get a value of ItemID with the getElementById("ItemID").innerHTML. I have the following code:

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

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

This however returns itemID as undefined. Any help would be greatly appreciated!

• javascript
• innerhtml
• getelementbyid

Share Improve this question Follow asked Sep 23, 2017 at 19:43 LukeLuke 52722 gold badges1010 silver badges2323 bronze badges 3

• Is the first code-sample php? The syntax looks way off. <div id= "ItemID" .$ItemID> doesn't make sense to me, why is the .$itemID prefixed with a period? That loop is outputting several elements with the same id. there should only be one of any given id in the DOM at a time. – admcfajn Commented Sep 23, 2017 at 19:53
• @admcfajn That is PHP code, the append operator in PHP is the period, that code should create something like <div id="ItemID"002, OP should fix it to create div id="ItemID002" – Ben Commented Sep 23, 2017 at 19:58
• Thanks @Ben, and I did know that... I just didn't think it was valid because the concatenate operator (i'd argue that the prepend operator would be .= ) is being used outside of PHP from the looks of things, that's why I was confused... No opening or closing php tags or echo/print statements – admcfajn Commented Sep 30, 2017 at 16:22

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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

getElementById("ItemID").innerHTML returns undefined, because it is undefined. The correct id is ItemID002. You need to be able to tell which it is.

First, change your PHP to create HTML like this.

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

Then, go to your Javascript and create this function.

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

Lastly, you're PHP creates <div id="ItemID"002>, you need to fix that by changing it from <div id= "ItemID" .$ItemID> $ItemID to <div id='ItemID.$itemId'>

EDIT: Also, I'd like to point out that in some places in your example, you forgot to use quotes when specifying the value of an attribute in HTML. I would remend you fix that.

Good luck!

Alternatively you can achieve this by javascript only. So you don't need to change markup or PHP. Here is a sample fiddle https://jsfiddle/L3bwfyve/

The key part is extraction of part of id of clicked element:

var itemIdPart = e.target.id.substr(5);

Be sure to check for nulls in e.target id etc...

Personally I would consider this solution a bit hacky... but you ask for javascrit, you get it ;-)

本文标签： javascriptgetElementByID for Dynamically generated ID ElementsStack Overflow