Cannot edit css of a class with variable

Question

I am trying to get a line through the li that i added when i click the li(like a grocery list).

$('document').ready(() => {
            let id = 1;

            $('.knop').click(() => {
                let boodschap = $('.tekst').val();
                let newli = `<li id="boodschap${id}"> ${boodschap}</li>`;
                $(".result").append(`${newli}`);
                id++;
            });

            $('ul').click(() => {
                let target = event.target.id;
                $(`${target}`).css({
                    "text-decoration": "line-through"
                });
                console.log(event.target.id);
            });
        });

I know the problem is in this part:

 $('ul').click(() => {
                let target = event.target.id;
                $(`${target}`).css({
                    "text-decoration": "line-through"
                });

I dont get a error in my console. so im stuck. but when i hard code the part where i put my ${target} it works. you cant use a variable in the css function? is there a way around this?

Chris Barr · Accepted Answer · 2022-02-13 15:03:52Z

1

I believe your issue is that you are missing the # from your ID selector. Just add it like this:

$('ul').click(() => {
  let target = event.target.id;
  $(`#${target}`).css({
    "text-decoration": "line-through"
  });
});

Or just forget about the string ID selection and just select the element already being passed, like this:

$('ul').click(() => {
  $(event.target).css({
    "text-decoration": "line-through"
  });
});

answered Feb 13, 2022 at 15:03

Chris Barr

34.7k28 gold badges105 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Colleen · Accepted Answer · 2022-02-13 14:46:54Z

0

I see you have target.val in your top example but the specified code just hs target.

Which one do you have in your code?

Also should it be target.val()?

can you console log your target and target.val() to make sure its equal to what you are hard coding?


                let target = event.target.id;
console.log("my target", target)
console.log("target val", target.val())
                $(`${target}`).css({
                    "text-decoration": "line-through"
                });```

answered Feb 13, 2022 at 14:46

Colleen

487 bronze badges

3 Comments

Jordy Over a year ago

when i console log the let target i get the id "boodschap1" which is correct. But when i fill it in as you did in your code with $(`${target}`).css({"text-decoration": "line-through"}); It does, nothing

Colleen Over a year ago

I think you can just pass the variable without the string interpolation? like $(target).css() I think you'll need to add the # to it since it is an id so like: $('#'+target)

Jordy Over a year ago

same thing again. no error. but still does nothing..

Nice Books · Accepted Answer · 2022-02-13 15:01:42Z

0

So you need to strikeout an <li> when it's clicked.

$('li').on('click', (evt)=>{
    let target = evt.target;
    $(target).css({'text-decoration': 'line-through'});
    console.log(evt.target.id);
}

The main problem with your code is that you store target <li>'s id, in a variable called target, rather than the target element itself. Misleading variable names can lead to confusion.

answered Feb 13, 2022 at 15:01

Nice Books

1,8812 gold badges19 silver badges21 bronze badges

1 Comment

Jordy Over a year ago

i can see where your coming from with the name. Ill change it. But still. the code doesnt work. the console log works. but the element doesnt get a strikeout when clicked ( i used the code you specified)

Collectives™ on Stack Overflow

Cannot edit css of a class with variable

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related