CODEWITHSUNDEEP
javascripthtml
NDevox
NDevox

Reputation: 4086

Changing the title of an element using a child nodes innerHTML

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 (e.g. q.children[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!

Upvotes: 0

Views: 507

Answers (3)

pid
pid

Reputation: 11597

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

Upvotes: 1

Smern
Smern

Reputation: 19066

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

Upvotes: 1

Matt Burland
Matt Burland

Reputation: 45135

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

Upvotes: 1

Related Questions