How to get the value of id of innerHTML?

Question

I have created a html like this:

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

The callAlert() is here:

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

Inside callAlert(), I have created id runtime inside the <p> tag and at last of for loop, I have set the paragraph like this. document.getElementById("lst").innerHTML = listText+i;

Now I am confuse when listItem is clicked then how to access the value of the selected item.

I am using this:

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

But getting value as undefined. Any help would be grateful.

Slightly unrelated but maybe parse the output from the prompt before entering the loop i.e. `parseInt( listRows, 10 )` and then test `if( listRows ) \\ false if NaN`. Just in case someone enters 'one'. — Bruno, Nov 12 '12 at 09:40

score 2 · Answer 1 · answered Nov 12 '12 at 09:33

2

try onclick = itemclicked(this.id) instead of onclick = 'itemclicked(id)'

answered Nov 12 '12 at 09:33

Varada

16,026
13
48
69

score 1 · Answer 2 · answered Nov 12 '12 at 09:31

1

You can pass only the var i and search the id after like this:

Your p constructor dymanic with passing only i

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

function

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

is what you want?

answered Nov 12 '12 at 09:31

Alessandro Minoccheri

35,521
22
122
171

getting error at var pElement = document.getElementById(id).value; – Narendra Pal Nov 12 '12 at 09:40

Bruno · Answer 3 · 2012-11-12T10:41:34.420

1

I am not sure but shouldn't the onclick function be wrapped with double quotes like so:

You have this

onclick = itemclicked(id)>'

And it should be this

onclick = "itemclicked(id)">'

You have to modify your itemclicked function to retrieve the "value" of your p element.

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

edited Nov 12 '12 at 10:41

answered Nov 12 '12 at 09:55

Bruno

5,772
1
26
43

yes it works in both d way.but this is not the solution of my question. and if the onclick have any error then how my alert of the function is executed – Narendra Pal Nov 12 '12 at 10:05
Is there any chance you could provide us with a [fiddle](http://jsfiddle.net/) of your code? – Bruno Nov 12 '12 at 10:14

score 1 · Accepted Answer · edited May 23 '17 at 11:43

Dude, you should really work on you CodingStyle. Also, write simple, clean code.

First, the html-code should simply look like this:

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

No div or anything like this. ul and ol shall be used in combination with li only. Also, you should always close the html-tags in the right order. Otherwise, like in your examle, you have different nubers of opening and closing-tags. (the closing div in the 5th line of your html-example doesn't refer to a opening div-tag)...

And here comes the fixed code:

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

You can watch a working sample in this fiddle.

The problems were:

You have to commit the id of the clicked item using this.id like @Varada already mentioned.
Before that, you have to build a working id, parsing numbers to strings using .toString()
You really did write kind of messy code. What was supposed to result wasn't a list, it was various div-containers wrapped inside a ul-tag. Oh my.

BTW: Never ever check if sth. is 0 using the ==-operator. Better always use the ===-operator. Read about the problem here

BTW++: I don't know what value you wanted to read in your itemClicked()-function. I didn't test if it would read the innerHTML but generally, you can only read information from where information was written to before. In this sample, value should be empty i guess..

Hope i didn't forget about anything. The Code works right now as you can see. If you've got any further questions, just ask.

Cheers!

Yes,this is the complete solution of my doubts. Thanks buddy. Thnks a lot — Narendra Pal, Nov 14 '12 at 04:36

How to get the value of id of innerHTML?

4 Answers4