使用子节点innerHTML更改元素的标题

Question

I've got a webpage which uses the JQuery ToolTips plugin for popup boxes with extra information. That's all working fine with no issues.

However in order for the popup boxes to work perfectly I need to give the elements in question titles detailing out what I want the popups to say. This would be simple if I could change the HTML directly but I can only do it through JS. More to bother me, the tooltip changes depending on the content of what's in the elements innerHTML, but the element itself doesn't have an ID. It's parent however does have an ID.

so I've been trying to access the child node through the parent, reads it's innerHTML, compare it to a few if statements and then apply a title to the parent based on this innerHTML.

Here is my code:

for(var i = 1; i<5; i++){
        var q = document.getElementById("cell.0."+i);
        console.log(i+" "+q);
        if(q.children[0].innerHtml === "some text1"){
            q.setAttribute('title', 'Other text1');
        }
        else if(q.children[0].innerHtml === "some text2"){
            q.setAttribute('title', 'Other text2');
        }
        else if(q.children[0].innerHtml === "some text3"){
            q.setAttribute('title', 'Other text3');
        }
        else if(q.children[0].innerHtml === "some text4"){
            q.setAttribute('title', 'Other text4');
        }
    }

And an accompanying JSFiddle to make it a bit clearer: http://jsfiddle.net/qxb58/7/

Note: the JSFiddle uses a button, but the actual function I'm using will be on page load.

I've been testing each line in the console. From what I can tell all of the statements which are immediately testable in the console work (egqchildren[0].innerHtml === "some text4" and q.setAttribute('title', 'Other text4');). But when put into a for loop it doesn't seem to work.

Note it's unlikely to be a HTML error as my HTML is autogenerated and works. If there is an error with the HTML in the fiddle, it's me being crap at HTML. Thanks for pointing it out though!

EDIT: Solution: innerHTML not innerHtml. Sorry for the stupid mistake. And thanks for the help!

Answer 1

In HTML ids are case sensitive. You set them in lower case and query them in JS with an upper case C .

Correct it this way:

q = document.getElementById("cell.0."+i);
                             ^ lower case now

This will not solve the problem but is just one of a multi-step debug. Below is a further answer solving the problem.

EDIT: this works now. I corrected the upper case C and replaced innerHtml with innerText .

And BTW, innerHtml is written this way:

innerHTML
     ^^^^ all upper case

Copy & paste solution:

function changer()
{
    for (var i = 1; i < 5; i++)
    {
        var q = document.getElementById("cell.0." + i);

        if (q.children[0].innerText === "some text1") {
            q.setAttribute('title', 'Other text1');
        } else if (q.children[0].innerText === "some text2") {
            q.setAttribute('title', 'Other text2');
        } else if (q.children[0].innerText === "some text3") {
            q.setAttribute('title', 'Other text3');
        } else if (q.children[0].innerText === "some text4") {
            q.setAttribute('title', 'Other text4');
        }
    }
}

Answer 2

Aside from your case problem, you also have the problem of your HTML being invalid. Enclose your <tr> s in a and it works:

http://jsfiddle.net/qxb58/7/

<table>
    <tr>
        <td id="cell.0.1"> <span>some text1</span>

        </td>
    </tr>doc
    <br/>
    <tr>
        <td id="cell.0.2"> <span>some text2</span>

        </td>
    </tr>
    <br/>
    <tr>
        <td id="cell.0.3"> <span>some text3</span>

        </td>
    </tr>
    <br/>
    <tr>
        <td id="cell.0.4"> <span>some text4</span>

        </td>
    </tr>
</table>
<br/>
<br/>
<button onClick="changer()">Changing</button>

Still not 100% correct, but working.

Oh, also, you need to set your fiddle to put your script in the head. You had it in the onload which won't work because the handler won't be defined.

Edit: Sorry, missed the part of actually setting the title. Your problem there is that you need innerText not innerHTML . See here: http://jsfiddle.net/qxb58/15/

Finally: if you are using a jQuery plugin for your tooltips, why not use jQuery throughout instead of getElementById

Answer 3

You were executing javascript onload which meant that when the DOM was created with the function changer() , it was undfined at that time. Also you were looking for property innerHtml instead of innerHTML . Properties are case senstive. With these two changes, it works fine:

JSFiddle