CODEWITHSUNDEEP
javascriptcssdom
Chris
Chris

Reputation: 124

Accessing textNode.style in DOM

For html, I have a bunch of tags which look as follows, which I am using to generate checklists.

<input type="checkbox"/> (some text here...)

I've tried a few things to try and style just the text beyond the tag to be lined through using javascript or css, and only when the checkbox is checked. and am getting an error about "cannot set property 'textDecoration' of undefined. When I log the .style of the nextSibling, that's what's coming back as undefined, but I am able to return the string from .nextSibling.

This is the javascript I have, and my logs for checked === true return

"checked"

"the text which follows the relevant checkbox"

The error is thrown by the line of code immediately past the second console.log.

for the else block, my console returns

"!checked"

the same error is thrown for the next line of code.

function main()
{
var checkBox = [];
var page;
page = document.getElementById("Content");
checkBox = page.childNodes;
for (i = 0, j = page.childNodes.length; i < j; i++)
{
if (checkBox[i].type == "checkbox")
{
    if (checkBox[i].checked === true)
    {
        console.log("checked");
        console.log(checkBox[i].nextSibling);
        checkBox[i].nextSibling.style.textDecoration = "line-through";
    }
    else
    {
        console.log("!checked");
        checkBox[i].nextSibling.style.textDecoration = "default";
    };
};
};
}; //main()

I have tested the .nextSibling.style, and it comes back as undefined... so, my question is how do I define it, or am I going to have to go through my project and put all the text I want to style into tags? If so, is it possible to do so automatically through javascript?

This is what I've come up with for a css solution, but I don't know how to actually call nextSibling, or if I even can.

input[type=checkbox]:checked + nextSibling
{
    text-decoration: line-through;
}

Upvotes: 1

Views: 960

Answers (2)

Edwin Reynoso
Edwin Reynoso

Reputation: 1541

What your trying to style is not possible, Text Node doesn't have style property:

What you'll have to do is wrap the text with something, I'd use a <span>:

<input type="checkbox">
<span class="text>Some Text Here</span>

In your JS:

var texts = document.querySelectorAll('.text');
for(var i = 0, l = textNodes.length; i < l; i++) {
     if(texts[i].previousElementSibling.checked) {
       texts[i].style.textDecoration = 'line-through';
     } else {
       texts[i].style.textDecoration = 'Default';
     }
}

If you use my library NodeList.js you could do:

$$('input:checked').nextElementSibling.style.set('textDecoration', 'line-through');

Upvotes: 2

Chris
Chris

Reputation: 124

I found a solution. I am using a few nested if loops to test for whether the childNode is a text node or a html tag. If it's a text node, I'm collecting the data, and creating a html tag which includes that data. Finally, I am using replaceNode() to insert the updated code. I'm sure that there are better options, and eventually I will replace all the text nodes with tags and use css, but this is working for now.

Upvotes: 0

Related Questions