CODEWITHSUNDEEP
javascripthtmldom-events
Narendra Pal
Narendra Pal

Reputation: 6604

How to get the value of id of innerHTML?

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.

Upvotes: 0

Views: 17156

Answers (4)

nozzleman
nozzleman

Reputation: 9659

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:

  1. You have to commit the id of the clicked item using this.id like @Varada already mentioned.
  2. Before that, you have to build a working id, parsing numbers to strings using .toString()
  3. 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!

Upvotes: 1

Bruno
Bruno

Reputation: 5822

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

Upvotes: 1

Varada
Varada

Reputation: 17052

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

Upvotes: 2

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35973

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?

Upvotes: 1

Related Questions