1

I'm trying to change the ID of a div via Ajax.
Because the ID has a dynamic value I added a class to the div.

My php code: 

    echo '<div id="pagemenu">
            <ul id="tabpanel">';
$tel = 0;
while($totaalklanten > -4)
{
    $tel++;
    echo '<li><a href="#'.$tel.'" name="'.$tel.'" onclick="listklant(\'klant.php\',this.name)">'.$tel.'</a></li>';
    $totaalklanten = $totaalklanten - 5;
}
echo '</ul>';
echo '<div class="changeme" id="default">';
//Lots of query of php stuff here to execute
echo '</div>

The div with the class 'changeme' is the victim.

My Ajax code so far: 

xmlhttp = new XMLHttpRequest();

function listklant(serverPage, pagenum)
{
    xmlhttp.open("GET", serverPage);



    document.getElementsByClassName('changeme').id = pagenum;
    alert(document.getElementById(pagenum));
    alert(document.getElementsByClassName('changeme').id);


    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            obj.innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null);
}

The first alert gives me 'null' :(...
Yet the second alert gives me the right value, so 'pagenum' was applied succesfully.
What am I doing wrong? And how to fix it?
(If there is anything else I can improve, please give a shout)

Mixxiphoid
  • 1,044
  • 6
  • 26
  • 46
  • Why is this flagged as @php? And @ajax? This is at best @javascript. – Christian Apr 12 '11 at 10:36
  • I added the javascript tag... I tagged it php and Ajax because there might be an error in my php, ajax or javascript. – Mixxiphoid Apr 12 '11 at 10:39
  • Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) – Heretic Monkey Feb 17 '18 at 21:58
  • @MikeMcCaughan This question is way older than the other one. Why would you mark it as duplicate? – Mixxiphoid Feb 18 '18 at 17:43
  • The age of the question is irrelevant. [Old question marked as duplicate of a new question](//meta.stackoverflow.com/q/315472) – Heretic Monkey Feb 18 '18 at 17:44

1 Answers1

5
document.getElementsByClassName('changeme').id = pagenum;

This line of code does not set the id of elements with the class changeme. getElementsByClassName returns a NodeList containing the elements. You are setting an id property on the NodeList. Obviously, this is not reflected on the elements within the list.

To do this, work on the elements themselves. If you have one element with the class, that is simple:

document.getElementsByClassName('changeme')[0].id = pagenum;

If you have more elements, you'll need a loop:

var els = document.getElementsByClassName('changeme');
for (var i = 0; i < els.length; i++ ) {
    els[i].id = pagenum;
}

However, it's probably a bad idea to change an element's id. Using a class might well be a better idea here.

Edit To explain why your second alert works, it is because the same NodeList is returned by the call to getElementsByClassName. From the spec:

When the method [getElementsByClassName] is invoked on an HTMLElement object again with the same argument, the user agent may return the same object as the object returned by the earlier call.

lonesomeday
  • 233,373
  • 50
  • 316
  • 318